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

Darin Dimitrov · Accepted Answer · 2010-05-19 17:31:17Z

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

answered May 19, 2010 at 17:31

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Darin Dimitrov Over a year ago

@Pandiya, as always glad to help :-)

ACP Over a year ago

looked at your profile page and the MVC project structure article was really nice... But NHibernate is really tough for me to get a hold on it...

Alec · Accepted Answer · 2010-05-19 17:28:13Z

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

answered May 19, 2010 at 17:28

Alec

9,1089 gold badges41 silver badges43 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related