使用Jquery Validation插件防止重复提交表单的解决方法

在项目开发中，测试人员报告缺陷说，即时有表单验证，但是如果快速点击两下“提交”按钮，系统会产生两条相同的记录。由于在项目中应用了Jquery Validation表单验证插件，所以要实现在Validation验证完毕后，提交form，然后禁止按钮。

 

CodeProject上有一个DisableBtnPostBack项目，但不无法和Jquery Validation结合，代码先贴出来，给大家提示下，碰到这种情况不要使用该代码。代码如下：

js:

function disableBtn(btnID, newText) {

    Page_IsValid = null;

    if (typeof (Page_ClientValidate) == 'function') {
        Page_ClientValidate();
    }

    var btn = document.getElementById(btnID);
    var isValidationOk = Page_IsValid;

    if (isValidationOk !== null) {

        if (isValidationOk) {
            btn.disabled = true;
            btn.value = newText;
            btn.style.background = "url(12501270608.gif)";

        }
        else {
            btn.disabled = false;
        }
    }
    else {
        setTimeout("setImage('"+btnID+"')", 10);
        btn.disabled = true;
        btn.value = newText;
        
    }
}

function setImage(btnID) {
    var btn = document.getElementById(btnID);
    btn.style.background = 'url(12501270608.gif)';
}

前端页面代码：

<asp:button id="btnOne" tabIndex="0" Runat="server" Text="Submit"
                        onclick="btnOne_Click" 
                        OnClientClick="disableBtn(this.id, 'Submitting...')" 
                        UseSubmitBehavior="false" /> 

 

好了，以下代码可以解决提交按钮完成Validation插件的Form验证后禁止按钮，提交Form：

js:

$(document).ready(function() { 
   $("#myForm").validate({ 
     submitHandler: function(form) { 
       $(form).find(":submit").attr("disabled", true).attr("value", 
"Submitting..."); 
       form.submit(); 
    } 
  }) 
});