0

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

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

4

1 回答 1

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>

于 2019-02-21T06:29:11.023 回答