checkvalidity 总是为必填字段返回 true

Question

我有一个输入字段和一个按钮。单击按钮时，我想调用 HTML 样式字段验证错误消息。由于这个原因，我将输入和字段包装在一个表单中。

    <form id="frmShippingHeader">

     <input name="trailerNumber" id="trailerNumber" class="form-control fireChange" type="text"  aria-describedby="enter Part Number" placeholder="Trailer Number" required>

     <button class="btn btn-success" id="btnCreateShipping" onClick="createShippingOrder()">Create Shipping Order</button>

   </form>

使用我的 javascript 我想检查表单是否有效或无效。如果表单有效，我会阻止默认，并且不需要错误消息。但是，如果表单无效，我不想阻止默认。但是，即使我将输入字段留空并单击按钮，也会blnFormValidity返回 true

$("#btnCreateShipping").click(function(e){

    blnFormValidity= $('#frmShippingHeader')[0].checkValidity()

    console.log(blnFromValidity)

    if(blnFormValidity==true){

        e.preventDefault();

        return false

    }

})

Answer 1

你这里有拼写错误blnFormValidity= $('#frmShippingHeader')[0].checkValidity()console.log(blnFromValidity)blnFromValidity is different than blnFormValidity除此之外，您可以使用 jquery 验证插件进行验证。jQuery 验证然后你可以直接检查表单验证$("#btnCreateShipping").click(function(e){&nbsp; &nbsp; console.log($("#frmShippingHeader").validate());&nbsp;})这很容易，并且可以为您提供更多功能。希望有帮助

Answer 2

更正您现有的代码：正如每个人为您的变量提到的那样，这只是拼写错误。所以只要纠正那件事就行了。另外：在您的 html 表单中，您正在调用onclick事件的方法，请记住，如果您在方法上没有任何特别的事情要做createShippingOrder(...)，请将其删除，否则您可能无法按事件绑定click和调用的顺序获得所需的结果方法onclick会导致您出现问题，例如以意外的顺序发生事情。要解决这个问题，您可以在方法中收集点击事件的功能，反之亦然。检查您更正的代码-jsFiddle。您还可以使用 JQuery 表单验证器，它非常方便，如下所示：&nbsp;<form id="frmShippingHeader">&nbsp; &nbsp; &nbsp;<input name="trailerNumber" id="trailerNumber" class="form-control fireChange" type="text"&nbsp; aria-describedby="enter Part Number" placeholder="Trailer Number" >&nbsp; &nbsp; &nbsp;<button type="button" class="btn btn-success" id="btnCreateShipping" >Create Shipping Order</button>&nbsp; &nbsp;</form>JQuery 表单验证：$("#frmShippingHeader").validate({&nbsp; rules: {&nbsp; &nbsp; trailerNumber:&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; required: true,&nbsp; &nbsp; &nbsp; number:true&nbsp; &nbsp; },&nbsp; },&nbsp; messages: {&nbsp; &nbsp;trailerNumber:&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; required: "Please trailer number",&nbsp; &nbsp; &nbsp; number:"Must be a number"&nbsp; &nbsp; },&nbsp; }});

Answer 3

这对我有用并打印 true$("#btnCreateShipping").click(function(e){&nbsp; &nbsp; const blnFormValidity= $('#frmShippingHeader')[0].checkValidity();&nbsp; &nbsp; console.log(blnFormValidity);&nbsp; &nbsp; if(blnFormValidity === true){&nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; return false&nbsp; &nbsp; }});function createShippingOrder&nbsp; () {&nbsp; &nbsp; alert('working')}如果你想写 100% 有效的代码，使用webstorm