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

    console.log($("#frmShippingHeader").validate());

 })

这很容易，并且可以为您提供更多功能。希望有帮助

Answer 2

更正您现有的代码：正如每个人为您的变量提到的那样，这只是拼写错误。所以只要纠正那件事就行了。

另外：在您的 html 表单中，您正在调用onclick事件的方法，请记住，如果您在方法上没有任何特别的事情要做createShippingOrder(...)，请将其删除，否则您可能无法按事件绑定click和调用的顺序获得所需的结果方法onclick会导致您出现问题，例如以意外的顺序发生事情。要解决这个问题，您可以在方法中收集点击事件的功能，反之亦然。检查您更正的代码-jsFiddle。

您还可以使用 JQuery 表单验证器，它非常方便，如下所示：

 <form id="frmShippingHeader">

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

     <button type="button" class="btn btn-success" id="btnCreateShipping" >Create Shipping Order</button>

   </form>

JQuery 表单验证：

$("#frmShippingHeader").validate({

  rules: {

    trailerNumber:

    {

        required: true,

      number:true

    },

  },

  messages: {

   trailerNumber:

    {

        required: "Please trailer number",

      number:"Must be a number"

    },

  }

});

Answer 3

这对我有用并打印 true

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

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

    console.log(blnFormValidity);

    if(blnFormValidity === true){

        e.preventDefault();

        return false

    }

});

function createShippingOrder  () {

    alert('working')

}

如果你想写 100% 有效的代码，使用webstorm