Validate will not submit form using ajax validation

Question

I am using the jQuery Validate plugin to validate the email field in my form by making an ajax request to make sure this email is not yet accepted by another user. I do this by adding a rule like this:

//make sure email field is on form before adding rule if ($(".unique_email").is("*")) { //remote validation $(".unique_email").rules("add", { remote: "http://test.nethop.com/test.cgi", messages: { remote: "This email is already in use" } }); } 

However, whenever I click "Submit" on the form, I will first make an ajax request to make sure that the letter was not received, and then it will not be sent, even if the letter is checked as well. You must click send again and then it will be sent. Does anyone know why this is?

I installed jsfiddle , demonstrating the problem. If you use the Chrome or firebug developer tools, you can see the ajax request made, returning true and still not sending.

HTML

 <form id="listing" method="post"> <ul> <li> <label for="username">Email *</label> <input type="text" name="username" id="username" autocomplete="off" class="email required unique_email" value=" [e-mail] " /> </li> <li> <input type="submit" name="submit" id="submit" class="btn" value="Save" /> </li> </ul> </form> 

Full script:

 $(document).ready(function () { var validator = $("form").validate({ onkeyup: false, onblur: true, }); if ($(".unique_email").is("*")) { //remote validation $(".unique_email").rules("add", { remote: "http://test.nethop.com/test.cgi", messages: { remote: "This email is already in use" } }); } }); 

Answer 1

Well, this one is strange, so bear with me.

The fact that you have input called / id submit is causing the problem. I think this is because under the hood jQuery validate calls form.submit . In your case, form.submit is a form element, so it does nothing.

If you rename the submit button, everything will be fine.

Example: http://jsfiddle.net/42TK4/7/