jquery newbie: combine validate with hidding submit button

Question

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

Answer 1

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.

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

Answer 3

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