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();

  }

  })

  });