jQuery表单验证分配提交按钮

Question

所以，我有一个表单和两个按钮，其中一个按钮只用于验证电子邮件，而另一个按钮是表单提交按钮。我正在使用jQuery验证来验证表单。

我想要的是只有SUBMIT按钮可以通过submitHandler提交表单并执行alert("success")，但每当我单击VERIFY时，它也会通过submitHandler提交表单并运行alert("success")。

这是脚本：

index.html:

<form id="form_data">
<div class="form-group">
<label>Phone Number</label>
<input id="phone_number" name="phone_number" required>
</div>
<div class="row">
<div class="form-group col-9">
<label>Email</label>
<input id="email" name="email" required>
</div>
<div class="form-group col-3">
<button id="btn_email">VERIFY</button>
</div>
</div>
<div>
<button id="form_data_submit" type="submit">SUBMIT</button>
</div>
</form>

script.js

jQuery(document).ready(function () {
var btnSubmitEl = $("#form_data_submit");
var formEl = $("#form_data");
formEl.validate({ // initialize jquery validation plugin
rules: {
phone_number: {
required: true,
number: true,
minlength: 7,
maxlength: 12
},
email: {
required: true,
minlength: 7,
maxlength: 20
}
},
submitHandler: function (form) {
alert("success")
return false;
}
});
});

我是不是遗漏了什么？

感谢

Answer 1

在使用HTML5时，您应该为验证按钮显式设置type=”button"。默认按钮行为提交表单。已在此处回答

Answer 2

您不需要两个按钮来验证表单，您可以只使用一个按钮验证表单并提交，如果出于任何原因您想要使用两个按钮，您必须使用两个事件侦听器，一个用于验证按钮，一个为提交按钮，而验证按钮提交表单的原因是formEl.validate接受了一个对象，在该对象中有一个名为submitHandler的函数，它在验证表单后提交表单，因此必须将其设置为返回false。我已经在下面的代码中实现了这一点

jQuery(document).ready(function () {
var btnSubmitEl = $("#form_data_submit");
var formEl = $("#form_data");
var verifybtn=$("#btn_email");
btnSubmitEl.on("click",()=>{
formEl.submit()//
alert("success")
})
verifybtn.on("click",()=>{
formEl.validate({ // initialize jquery validation plugin
rules: {
phone_number: {
required: true,
number: true,
minlength: 7,
maxlength: 12
},
email: {
required: true,
minlength: 7,
maxlength: 20
}
},
submitHandler: function () {
return false;
}
});
});
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form_data">
<div class="form-group">
<label>Phone Number</label>
<input id="phone_number" name="phone_number" required>
</div>
<div class="row">
<div class="form-group col-9">
<label>Email</label>
<input id="email" name="email" required>
</div>
<div class="form-group col-3">
<button id="btn_email">VERIFY</button>
</div>
</div>
<div>
<button id="form_data_submit" type="submit">SUBMIT</button>
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>