Question

我正在尝试调试代码段，因此我可以了解它是如何工作的本机javascript验证checkValidity（）：

问题出在这里

首先，我创建一个值数组和一个与click事件相关的表单：

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 );

});

下一步是创建一个函数，以便基于我的数组获取表单中的所有元素，如果所有元素都已填充，请将有效值更改为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;
}

那是我的代码失败的地方

Answer 1

您可以为此使用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>

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

1 个答案: