表单提交时禁用提交按钮

Question

我正在使用此验证代码，我希望在验证后提交表单时禁用提交按钮。 提交按钮：

<input type="submit" class="submitStandard" value="Save Info" > 

输入验证码：

<script type='text/javascript'>//<![CDATA[ 
       $(".submitStandard").on('click', function() { 
        $('form').validate({ 
         ignore: [], 
         rules: { 
          required: { 
           required: true 
          }, 
          shopname: { 
           required: true 
          } 
         }, 
         highlight: function(element) { 
          $(element).closest('.form-group').addClass('has-error'); 
         }, 
         unhighlight: function(element) { 
          $(element).closest('.form-group').removeClass('has-error'); 
         }, 
         errorElement: 'span', 
         errorClass: 'help-block', 
         errorPlacement: function(error, element) { 
          if(element.parent('.input-group').length) { 
           error.insertAfter(element.parent()); 
          } else { 
           error.insertAfter(element); 
          } 
         } 
        }); 
       });//]]> 
      </script> 

任何最佳的解决方案，提出应禁止在没有任何验证错误。

问题：当我保存的信息，如果我点击提交按钮两次或三次，它保存值的两倍，三，应点击一次，那么它应该是禁用。

Answer 1

只需添加：

$(this).prop("disabled", true); 

全码：

$(".submitStandard").on('click', function() { 
    $(this).prop("disabled", true); 
    $('form').validate({ 
    ignore: [], 
    rules: { 
     required: { 
     required: true 
     }, 
     shopname: { 
     required: true 
     } 
    }, 
    highlight: function(element) { 
     $(element).closest('.form-group').addClass('has-error'); 
    }, 
    unhighlight: function(element) { 
     $(element).closest('.form-group').removeClass('has-error'); 
    }, 
    errorElement: 'span', 
    errorClass: 'help-block', 
    errorPlacement: function(error, element) { 
     if(element.parent('.input-group').length) { 
     error.insertAfter(element.parent()); 
     } else { 
     error.insertAfter(element); 
     } 
    } 
    }); 
}); 

或者对submit事件<form>的：

$('form').submit(function(){ 
    $(this).find(".submitStandard").prop('disabled', true); 
}); 

注：我可以看到你正在使用一个通用的$("form")。这是不推荐的，因为当JavaScript加载时，它会盲目地适用于所有<form>元素。所以最好给一个id。

Answer 2

你可以尝试所谓

$('form#id').submit(function(){ 
    $(this).find('input[type=submit]').prop('disabled', true); 
}); 

How can I disable/enable submit button after jQuery Validation?

Answer 3

利用财产低于validatesubmitHandler：

$(".submitStandard").on('click', function() { 
    var button=$(this); 
    $('form').validate({ 
    ignore: [], 
    rules: { 
     required: { 
     required: true 
     }, 
     shopname: { 
     required: true 
     } 
    }, 
    //.. Other properties 
    //.. 
    submitHandler: function(form) { 
     if(form.valid()) //check if form is valid? 
     { 
      button.prop("disabled", true); 
     } 
    }, 
    //.. 
    }); 
}); 

Answer 4

HTML：

<form id="registrationfrm" method="post"> 
<input type="submit" id="submitbtn" name="submit" value='SAVE' /> 
</form> 

的Jquery：

$("#registrationfrm").on("submit",function(){ 
$("#submitbtn").prop('disabled', true); 
});