jquery newbie：结合验证与隐藏提交按钮

Question

我是一个新的jQuery。我已经得到验证我的形式工作（MVC 1.0/C＃）与此：

 <script type="text/javascript"> 
     if (document.forms.length > 0) { document.forms[0].id = "PageForm"; document.forms[0].name = "PageForm"; } 
     $(document).ready(function() { 
      $("#PageForm").validate({ 
       rules: { 
        SigP: { required: true } 
       }, 
       messages: { 
        SigP: "<font color='red'><b>A Sig Value is required. </b></font>" 
       } 
      }); 

     }); 
    </script> 

我也想隐藏的提交按钮，以防止颠簸鼠标综合征导致重复条目控制器完成和重定向之前（我使用GPR模式）。为此目的以下工作：

<script type="text/javascript"> 
    // 
    // prevent double-click on submit 
    // 
     jQuery('input[type=submit]').click(function() { 
      if (jQuery.data(this, 'clicked')) { 
       return false; 
      } 
      else { 
       jQuery.data(this, 'clicked', true); 
       return true; 
      } 
     }); 
    </script> 

但是，我不能让这两个一起工作。具体来说，如果在点击提交按钮后发生验证失败（这发生在表单如何工作的情况下），那么除非我重新执行浏览器刷新来重置'clicked'属性，否则我无法再次提交表单。

除非表单验证，我如何重写上述第二种方法不设置点击属性？

Thx。

Answer 1

如果您使用this验证插件，它带有一个有效的（）方法。

jQuery('input[type=submit]').click(function() { 
     var self = $(this); 

     if (self.data('clicked')) { 
      return false; 
     } else if (self.closest('form').valid()) { 
      self.data('clicked', true); 

      return true; 
     }; 
    }); 

甚至：

jQuery('input[type=submit]').click(function(event) { 
     var self = $(this); 

     if (self.closest('form').valid()) { 
      self.attr('disabled', true); 
     }; 
    }); 

Answer 2

我会做这样的：

$('#PageForm').submit(function() { 
    if($(this).valid()) $(':submit', this).attr('disabled', true); 
}); 

这引发了形式提交，查找任何内提交按钮并禁用它，如果该表格是有效的。

使用$('#PageForm :submit').removeAttr('disabled');准备就绪时重新启用按钮。

Answer 3

对于那些仍然在寻找一个答案，好像我是，我这是怎么做的：

$("#form1").validate({ 

    rules: { 
     customer_title: "required", 
     customer_firstName: "required", 
     customer_lastName: "required" 
     } 
    }, 
    messages: { 
     customer_title: "Please select a title", 
     customer_firstName: "Please enter a firstname", 
     customer_lastName: "Please enter a lastname" 
     } 
    }, 
     submitHandler: function(form) { 
     //submitButtonX is the class attribute i placed on the button 
     $('.submitButtonX').attr('disabled', 'disabled'); 
     form.submit(); 
    } 
});