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

【问题标题】：How to use check validity to validate a form with jquery如何使用检查有效性来验证带有 jquery 的表单
【发布时间】：2023-03-23 01:55:01
【问题描述】：

我正在尝试调试一个 sn-p，所以我可以理解它是如何工作的原生 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，它将禁用按钮。

虽然出了点问题，但我的价值永远是真实的。

有人知道为什么吗？

sn-p 如下：

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

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

【问题讨论】：

我必须承认，我有点困惑——这似乎是一种检查表单有效性的非常复杂的方法。（而且非常脆弱，因为您将表单输入的名称硬编码到脚本中。）除此之外，虽然我还没有看到任何错误本身 - 但我被束缚了想问一下，既然你有console.log，那么控制台输出什么？
如果表单无效有效，您应该禁用该按钮。
应该是if (!valid)
它输出输入 6 true
我认为这段代码 sn-p 应该让您更好地了解 checkValidity() 函数的工作原理。 w3schools.com/js/tryit.asp?filename=tryjs_validation_check

标签： javascript jquery checkvalidity

【解决方案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>

【讨论】：