我正在使用jquery验证插件在我的页面上验证并提交一个表单,该表单具有多个提交按钮来运行不同的功能。
一个提交按钮使用 $post 方法运行,而另一个使用标准操作方法运行。
(如果我的术语有误,请坚持我)
我遇到的问题是,如果我使用第一个按钮提交表单,然后使用第二个按钮重试,它会尝试在第二个提交时再次运行第一个操作。
这是我的代码,希望能让事情更清楚......
<form id="myForm" action="add.php">
<input type="submit" id="myfunction" />
<input type="submit" id="add" />
<input type="text" name="myvalue" />
</form>
和我的验证代码...
$("#myForm input[type=submit]").click(function(e) {
if (e.target.id == 'myfunction') {
$("#myForm").validate({
submitHandler: function(form) {
$.post('myfunctionpage.php', $("#myForm").serialize(), function(data) { });
}
});
} else if (e.target.id == 'add') {
$("#myForm").validate({
rules: {
name: {
required: true,
}
}
});
}
});
你为什么不把代码分成两段?
$("#myfunction").click(function(e) {
$("#myForm").validate({
submitHandler: function(form) {
$.post('myfunctionpage.php', $("#myForm").serialize(), function(data) { });
}
});
}
$("#add").click(function(e) {
$("#myForm").validate({
rules: {
name: {
required: true
}
}
});
}
您需要在 $.post 案例中停止表单提交。尝试从单击事件处理程序返回 false,这应该会阻止事件冒泡到窗体并导致其提交。
就个人而言,我挂钩到表单元素上的submit
事件,而不是按钮上的单击事件。原因是许多用户通过将光标放在文本框中然后按 Enter 来提交表单。不会发生任何点击事件,并且您的代码被绕过...
另外,自从我使用验证插件以来已经有一段时间了,但我认为您在提交表单后调用 validate() 时使用它是错误的。 检查文档是否正确使用。
万一有人在寻找它。第一次提交后简单使用 $("#myForm").validate().destroy();为了清除"表单数据"。
https://jqueryvalidation.org/Validator.destroy/