如何在使用 jQuery 验证插件验证表单之前阻止提交？

Question

我的表单上有一个搜索按钮，当我点击它时，onclick 属性激活并将它跳转到我在 onclick 上提到的函数这是我的按钮 <input style="float:right;" type="submit" onclick="getData('search')" id="search" class="btn btn-success" name="searchbtn" value="Search">

我想当我点击搜索按钮时先进行表单验证然后转到该功能，但我不知道为什么在验证之前直接转到该功能

$('#myForm').validate({
    onclick:false,
        rules:{
                name:"required",
                dob:"required",
                email:{
                    required: true,
                    email: true
                },
                age:{
                    required: true,
                    number: true,
                    minlength:2,
                    maxlength:2
                }
              },
              messages:{
              name: "Please Enter Name",
              email: "Please Enter valid Email",
              number: "Please Enter Only Digits",
              min_length:"Please Enter Minimum 2 Digit",
              max_length:"Please Enter Maximum 2 Digit"
              }
        });

这是我的 jquery 验证码。

<form id="myForm" method="post">
                Name:<p><input id="name_search" class="form-control" type="text" name="name" placeholder="name" required></p>
                Date of Birth:<p><input class="form-control" id="dob_search" type="text" name="dob" placeholder="dd/mm/yy" required></p>
                Sex:<p> <select id="sex_search" name="sex" class="form-control">
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                            </select></p>
                Email:<p><input id="mail_search" type="email" class="form-control" name="email" placeholder="Enter your email" required></p>
                Age: <p><input id="age_search" class="form-control" type="text" name="age" placeholder="Age" required></p><br/>
                <input style="float:right;" type="submit" onclick="getData('search')" id="search" class="btn btn-success" name="searchbtn" value="Search"></form>

这是我的表格

Answer 1

从 html 标记中删除 onclick 属性并在确认您的表单有效性后调用函数即可，例如：

$('#myForm').validate({
    ....
});

$('#search').click(function() {
    //check if form is valid
    if ( $('#myform').valid() ) {
        //call the function
        getData('search');
    }
});

Answer 2

您的验证插件可能未加载。检查控制台是否有错误。

另外getData('search')应该在验证通过后调用。

并从

中删除 onclick="getData('search')"

<input style="float:right;" type="submit" onclick="getData('search')" id="search" class="btn btn-success" name="searchbtn" value="Search">

尝试添加

submitHandler: function(form) {
        getData('search');
      }:

在 :

$("#myform").validate({
  submitHandler: function(form) {
    getData('search');
  }
});

如何在使用 jQuery 验证插件验证表单之前阻止提交？

How to block submission until form gets validated using jQuery Validate plugin?

jquery

jquery-validate