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

Question

我正在尝试调试一个片段，所以我可以理解它是如何工作的本机 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');
    }
}

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

虽然有些地方出了问题，但我的价值观将永远是正确的。

有人知道为什么吗？

代码段如下：

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

那是我的代码失败的地方

Answer 1

您可以为此使用 form.reportValidity()。它基本上检查表单并验证它，如果它检测到无效字段，它将 return 弹出消息。

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>

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

How to use check validity to validate a form with jquery

javascript

jquery

checkvalidity