jquery新手：将验证与隐藏提交按钮结合起来

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 属性？

谢谢。

Answer 1

对于那些像我一样仍在寻找答案的人，我是这样做的：

$("#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();
    }
});

Answer 2

如果您使用此验证插件，它带有一个 valid() 方法。

  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 3

我会这样做：

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

这是在提交表单时触发的，查找内部的任何提交按钮，如果表单有效则禁用它。

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