你可以使用这个技巧：
在HTML表单中：

<input type="text" name="username" required="required" class="input-hidden">

CSS类：

.input-hidden{
        height:0;
        width:0;
        visibility: hidden;
        padding:0;
        margin:0;
        float:right;
}

你可以在html中为所有必需的属性添加一个类名：

<input type="text" name="first_name" class="card-payment-info" required>
<input type="text" name="last_name" class="card-payment-info" required>

并且，从js事件（如单击）中，您可以启用或禁用所需的属性：

// disable require:
$(".card-payment-info").attr('required', false);
// enable require
$(".card-payment-info").attr('required', true);

添加一个类.hideable到你的hideable requiredinput。然后使用这些函数而不是show（）和hide（）：

function show1() {
//Your show() code here
$('.hideable').attr('required', 'required');
}
function hide1() {
//Your hide() code here
$('.hideable').removeAttr('required');
}

1 -将表单更改为“novalidate”
2 -捕获提交事件
3 -强制浏览器使用input.reportValidity（）单独检查每个可见输入

$('form')
  .attr('novalidate', true)
  .on('submit', function(){
    var isValid = true;
    $('input:visible,select:visible,textarea:visible', this).each(function() {
      // report validity returns validity of input and display error tooltip if needed
      isValid = isValid && this.reportValidity();
      // break each loop if not valid
      return isValid;
    });
    // do not submit if not valid
    return isValid;
  })

我为此制作了一个JQuery工具，它也使用了一个变化观察器来自动应用于动态创建的表单。
https://github.com/severinmoussel/VisibilityFormValidator/blob/master/VisibilityFormValidator.js

我为内置的show()和hide()编写了一个简单的替换程序，它删除了hide上的required，并将它们恢复到show上（对于所有子元素）。

(function ($) {
    var oldShow = $.fn.show;
    $.fn.show = function () {
        oldShow.apply(this, arguments); //run the original "show" method
        this.find("[notrequired]").prop("required", true).removeAttr("notrequired");
        return this;
    };
    var oldHide = $.fn.hide;
    $.fn.hide = function () {
        oldHide.apply(this, arguments); //run the original "hide" method
        this.find("[required]").prop("required", false).attr("notrequired", "1");
        return this;
    };
})(jQuery);

UPD：在这里发布作为要点，以防有人想添加任何东西https://github.com/alex-jitbit/jquery-required-visibility/blob/main/showhide.js

你可以添加pointer-events: none;，这样用户就不能点击隐藏的元素，而且当你悬停它时光标也不会改变。正如@DeadApe在这个问题中回答的那样https://stackoverflow.com/a/65356856/6938902

一个解决方案是编写自己的validation-function：
该函数以默认方式检查所有文本区域和输入，但首先检查输入是否显示。

function validateFormOnlyVisableInputs(elForm) {
    var inputs = elForm.querySelectorAll("input, textarea");
    for (var i = 0; i < inputs.length; i++) {
        console.log(i);
        // display:none inputs ignorieren
        if (inputs[i].offsetParent === null) continue;
        if (!inputs[i].checkValidity()){
            inputs[i].reportValidity();
            return false;
        } 
            
    }
    return true;
}

你必须在submit-button上添加一个eventlistener，然后调用valdation函数：

// this is out of a class, so you have to remove this...
 // if you have problems you can write me ;)
 this.elSendButton = this.elForm.querySelector("Button");

 this.elSendButton.addEventListener("click", async (e) => {
     e.preventDefault();
     if (validateFormOnlyVisableInputs(this.elForm)) {
        this.elForm.submit();
        ...