如何使用 jquery 检查有效性来验证表单

我正在尝试调试一个片段，以便我可以理解它如何在本机 javascript 验证 checkValidity() 中工作：

问题是这样的：

首先，我创建一个值数组和一个与单击事件连接的表单：

jQuery('input[name="submit-request-form"]').click(function() {
    var fields = [ 'FirstName','Lastname','Email','Telephone','CampusID','ProgramID'];
    var form = 'flow-request-form';
    disableSubmitButton( $(this) , fields , form );

});

下一步是创建一个函数，以便根据我的数组获取表单中的所有元素，如果所有元素都已填充，请将值 valid 更改为 false 并提交表单。

function disableSubmitButton( Obj , fields , form ){

    var valid = true;
    for (var i = 0 ; i < fields.length ; i++) {
        var element = jQuery('form[name="'+form+'"] [name="'+fields[i]+'"]');
        console.log( element[0].checkValidity());
        if( element[0] && !element[0].checkValidity() ){
            valid = false;
            break;
        }
    }
    console.log(valid);
    if(valid){
        Obj.attr('disabled' , 'disabled');
    }
}

如果我的表单的值未填写或无效，则有效变量不会更改为 false 并且会禁用该按钮。

尽管有些事情出了问题，但我的价值永远是真实的。

有人知道为什么吗？

片段如下：

if( element[0] && !element[0].checkValidity() ){
    valid = false;
    break;
}

这就是我的代码失败的地方

您可以使用 form.reportValidity() 来实现这一点。它基本上检查表单并验证它，如果检测到无效字段，它将返回一条弹出消息。

trackedInput = $('#trackedInput');
confirmSubmit = $('#confirmSubmit');
yourForm = document.querySelector('#confirm');

confirmSubmit.click(function(e) {
  yourForm.reportValidity();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hidden">
  <input id="trackedInput" type="text" form="confirm" required>
</div>

<div class="hidden">
  //Some other stuffs here
</div>

<div class="not_hidden">
  <input id="confirmSubmit" type="submit" form="confirm" required>
</div>

<form id="confirm"></form>