jquery newbie: combine validate with hidding submit button

问题

I'm new a jQuery. I have gotten validate to work with my form (MVC 1.0 / C#) with this:

      <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>

I also want to hide the Submit button to prevent twitchy mouse syndrome from causing duplicate entry before the controller completes and redirects (I'm using an GPR pattern). The following works for this purpose:

  <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>

However, I can't get the two to work together. Specifically, if validate fails after the Submit button is clicked (which happens given how the form works), then I can't get the form submitted again unless I do a browser refresh that resets the 'clicked' property.

How can I rewrite the second method above to not set the clicked property unless the form validates?

Thx.

回答1:

For those still looking for an answer like I was, this is how I did it:

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

回答2:

If you're using this validation plugin, it comes with a valid() method.

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

or even:

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

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

回答3:

I would do it like this:

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

This is triggered on submit of the form, looks for any submit button inside and disables it if the form was valid.

Use $('#PageForm :submit').removeAttr('disabled'); to re-enable the button when ready.

来源：https://stackoverflow.com/questions/2581535/jquery-newbie-combine-validate-with-hidding-submit-button