Input type button/submit that does both form validation and submit via jquery ajax?

Question

I am trying to use jquery validator plugin and form submit via ajax in jquery.....

Validator plugin works with <input type="submit" value="Add a client" id="clientadd"/> but my form submit works with <input type="button" value="Add a client" id="clientadd"/>.....

<form id="addform" autocomplete="off">
 //My controls here
</form>

I didn't specify action and method attributes here as i ll submit my form using jquery.ajax().... Any suggestion how to get both working together....

Answer 1

You can add action="" so it will be valid HTML, and use the type="submit" button without problems. Simply catch the submit with jQuery and prevent the normal submit from occuring:

$('#addform').submit(function() {
  // your stuff here to process the form

  // end with
  return false;
});

Answer 2

You could specify a submitHandler that will perform the form submission once validation succeeds:

$('form').validate({
    submitHandler: function(form) {
       // TODO: submit your form in ajax here
    }
});

So if you are using the jQuery.form plugin to ajaxify your form:

$('form').validate({
    submitHandler: function(form) {
        $(form).ajaxSubmit();        
    }
});