如何使用JQuery验证添加STOP Multiple Form Submit

我想在验证完成并且表单提交后停止禁用提交按钮,这样我就不会有多个DB插入.我没有更新完整表单验证的帖子,因为大多数人说这是错误的,但我不这么认为.

这是提交：

<input class="button2" style="border-right:none; font-size:13px;" name="List Item" id="submit" type="submit" value="List Item" />

并在jQuery验证下面：

<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script src="http://jquery.bassistance.de/validate/additional-methods.js"></script>   

<script>
$( "#UploadForm" ).validate({

  errorLabelContainer: "#messageBox",wrapper: "td",rules: {  

   <?PHP if ($type == 'Aution' || $type == 'Both') {  ?> 
    auction_price: {
    required: true,number: true,min: 1.00
    },auction_reserve_price: {
    number: true,range: [1.00,500000.00]
    },<?PHP } ?>

    <?PHP if ($type == 'BuyItNow' || $type == 'Both') {  ?> 
    auction_bin_price: {
    required: true,500000.00]

    },<?PHP } ?>


    Country: {
        required: true
    },select3: {
        required: true
    },select2: {
        required: true
    },auction_postage_type: {
        required: true

    },auction_postage_type_price: {
        number: true,range: [0.00,auction_int_postage_type_price: {
        number: true,Europe1: {
        number: true,Russia1: {
        number: true,northAmerica1: {
        number: true,Australia1: {
        number: true,SouthAmerica1: {
        number: true,Africa1: {
        number: true,Asia1: {
        number: true,MiddleEast1: {
        number: true,<?PHP if ($type == 'BuyItNow') {  ?> 
    auction_item_quantity: {
        required: true,digits: true,range: [1,99]
    },<?PHP } ?>

    auction_description: {
    required: true
    },auction_int_postage_type: {
    required: true
    },listing_type: {
    required: true
    }
  },messages: {
    auction_price: "Please Enter Auction Start Price - In Decimal Format,minimum value 1.00",auction_reserve_price: "Please Enter Auction Reserve Price - In Decimal Format 0.00",auction_bin_price: "Please Enter Buy It Now Price - In Decimal Format,select3: "Please Select Main Category",select2: "Please Select Sub Category",auction_item_quantity: "Please Enter Quentity - min 1 - max 99",auction_description: "Please Enter Auction Description -  Min 10,Max 1000 characters",listing_type: "Please Select Listing Type",auction_postage_type: "Please Select Postage Type",auction_int_postage_type_price: "Please Enter International Postage Cost In Decimal Format,auction_postage_type_price: "Please Enter Postage Cost In Decimal Format",auction_int_postage_type: "Please Select",Country: "Please Select Country",},submitHandler:function(form){
       $('#submit').attr('disable',true).css('pointer-events','none');
  }


});
</script>

解决方法

在submitHandler中禁用提交按钮：

$("#UploadForm").validate({

   //all your options here

   submitHandler:function(form){
       $('#submit').attr('disabled','disabled');
   }
});

只有在成功验证表单后才会调用submitHandler.只要它返回true,表格将在之后正常提交.如果你想获得更多花哨而不是禁用提交按钮,你可以有一个全局变量来记住表单是否已经提交,然后在第一次之后从这个函数返回false.

第一次提交后,提交按钮被禁用的工作示例：http://jsfiddle.net/ryleyb/hHAvD/

原文地址：https://www.jb51.cc/jquery/180394.html