Javascript 如何销毁jQuery验证和任何进一步的提交尝试？

我有以下jQuery验证插件代码。。。。基本上，在提交时，我将所有内容向上滑动并淡出。。。唯一的问题是，如果你足够快，你可以多次提交表单。如何确保在输入上按enter键（或单击submit按钮）不会进一步提交

基本上，表单会在没有javascript的情况下加载action属性中的url，因此单纯的解除绑定不起作用。。。（即使它这样做了，我也可以随时按enter/单击足够快的速度让它再做几次……）

jQuery（'.desired'）。验证({
是的，
规则：{
电邮：{
要求：正确，
电子邮件：真的
}
},
包装器：“div”，
信息：{
电子邮件：“请输入有效的电子邮件地址。”
},
errorPlacement:函数（错误，元素）{
error.hide（）.appendTo（element.parent（））.hide（）.slideDown（）；
},
errorClass:“帮助文本”，
submitHandler:函数（表单）{
var$=jQuery；
var url=$（form.attr（'action'）；
var query=$（form）.serialize（）；
$.ajax({
url:url，
类型：“POST”，
数据：查询，
成功：函数（）{
$（“
谢谢”）
.insertAfter（jQuery（表单））
.css（'height'，function（i，h）{
$（this.hide（））
返回h；
});
//$（form.css（'height'，$（form.height（））；
$（form.slideUp（'slow'）；
$（form）.fadeOut（{queue:false，duration:'slow'}）；
//$（'.help jquery'）.fadeIn（'slow'）；
$（“.help jquery”）
.css（'opacity'，0）
.slideDown（“快速”）
.制作动画(
{不透明度：1}，
{队列：false，持续时间：'slow'}
);
//$（'.desired submit'）。单击（函数（）{
//返回false；
//});
},
错误：函数（）{
log（'错误：未正确提交'）；
},
完成：功能（e）{
//$（'.desired'）。取消绑定（'submit'）；
//e、 预防默认值（）；
//返回false；
}
});
},
成功：函数（错误，元素）{
},
突出显示：函数（错误）{
//这个空函数需要在这里才能工作
}
});

有一个1或0的变量。在进行任何验证之前，请检查变量是否等于0。如果不是0，则不执行任何操作。如果是，请继续。验证通过后，将变量设置为1，以便验证不会再次发生。

使用布尔变量，如下所示：

var didValidate = false;

if(!didValidate) {
    jQuery('.desired').validate({
        //... your code here
    });
}

在AJAX成功函数中，将

didValidate

设置为true。

使用事件名称空间：

“.”后面的名称让我们更具体地以处理程序为目标

这位于提交处理程序的顶部：

$(form).bind('submit.temp_submit_hold', function(e){
    e.preventDefault();
    e.stopPropagation(); //added this in case the plugin's handler func uses bubbling
    return false;
} );

这是ajax调用的完整回调的顶部：

$('.desired').unbind('submit.temp_submit_hold');

---

在看到您完整的评论后，再做一点解释。在onsubmit处理程序开始工作后，立即执行preventDefault。当您想再次启用它时，即为On complete。因此，我们绑定了一个func，该func使用prevent default停止它，然后解除绑定以切换行为。我还添加了stopPropagation，以防插件使用委托/冒泡。

使用

unbind（）

的方法是正确的，它解决了一半的问题，因为它将有效地抑制表单提交时的验证

要解决后半部分问题，您只需在解除绑定后，通过注册适当的处理程序，对表单的

submit

事件进行中性化：

$(form).unbind("submit").submit(function() {
    return false;
});

---

也许最简单的方法就是在提交程序中添加类似的内容

submitHandler: function(form) {

    var $ = jQuery;
    if ( $.data(form, "submit") ) > "" return false;
    $.data(form, "submit", "in progress");
    //  .. the rest of your handler
}

如果希望以后再次提交表单，请在成功时删除.data（）。

使用该方法。 这个问题及其答案都很古老。因此，从那时起，开发人员添加了一个

.destroy（）

方法来从表单中分离验证插件

销毁此验证程序实例，释放资源并注销事件

---

要停止多次提交，请禁用插件的

submitHandler

功能中的

submit

按钮。（仅当表单有效且您已单击提交按钮时，

submitHandler

才会触发。）

---

现在，ajax嵌套在validate中。那就行不通了？不，行不通。问题是，这只会起作用一次，这正是你想要的。它的工作方式是，一旦成功验证，

didValidate

设置为false。一旦为false，您将无法再次验证，无论您按Enter键多少次。：）就是这样：验证不需要再次运行就可以激活。。。。一旦你运行它，它会监视所有的输入并永远验证它们。。。请注意，没有运行多次验证代码的代码，它只是自己发生的。我需要做的是移除它所附的任何东西。。。我想这就是我要说的。所以这是一个实际的jQuery插件。。。。一旦你设置了它，它就会一直工作直到页面重新加载。。。。因此，我需要一种类似于$（'.desired'）.ValidateStroy（）。。。或者类似的。这看起来很有效，但只适用于单击“提交”按钮：按enter键仍允许我多次触发它。我将其与注释掉的取消绑定代码放在同一个位置。。。。它需要直接位于提交处理程序中，就在Ajax调用的下面。谢谢仅供参考：该插件现在包含一个。请参阅：对于那些卡在早期版本上的插件，您可以像这样对其进行修补：

jQuery.validator.prototype.destroy=

submitHandler: function(form) {

    var $ = jQuery;
    if ( $.data(form, "submit") ) > "" return false;
    $.data(form, "submit", "in progress");
    //  .. the rest of your handler
}

// Initialize the validation plugin on your form

var validator = $("#myform").validate();

// Remove validation from your form

validator.destroy();

// After this point `#myform` is back to its original state without validation.

submitHandler: function(form) {
    // validation & submit success, so disable submit button
    $("#yourSubmitButton").prop('disabled', true);
    // your ajax code here
    return false;
}