jQuery validator plugin + ajax submitting not working

Question

I use the jQuery validator plugin (1.11) from bassistance.de and submit via php. Now i have add an ajax call in the submit handler at the end of the javacript code, but the

Answer 1

Your ajax belongs inside the submitHandler callback function of the jQuery Validate plugin.

As per docs,

submitHandler, Callback, Default: default (native) form submit

Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it validated.

Your other problem is that you're calling .validate() twice. After it's called the first time, the other instance is ignored and so are all the rules you're trying to pass into it. The .validate() method gets called ONE time upon DOM ready to initialize the plugin on your form.

Finally, you don't need to put a submit handler into the submitHandler callback function.

DEMO: http://jsfiddle.net/nTNLD/1/

$(document).ready(function () {

     $("#contactform").validate({
         ignore: ":hidden",
         rules: {
             name: {
                 required: true,
                 minlength: 3
             },
             cognome: {
                 required: true,
                 minlength: 3
             },
             subject: {
                 required: true
             },
             message: {
                 required: true,
                 minlength: 10
             }
         },
         submitHandler: function (form) {
             $.ajax({
                 type: "POST",
                 url: "formfiles/submit.php",
                 data: $(form).serialize(),
                 success: function () {
                     $(form).html("<div id='message'></div>");
                     $('#message').html("<h2>Your request is on the way!</h2>")
                         .append("<p>someone</p>")
                         .hide()
                         .fadeIn(1500, function () {
                         $('#message').append("<img id='checkmark' src='images/ok.png' />");
                     });
                 }
             });
             return false; // required to block normal submit since you used ajax
         }
     });

 });

Answer 2

It is easy. Only do this

if ( $( "label.error" ).length===false || $( "label.error" ).is(":visible")===false) {

here set the ajax

}

Answer 3

You have to put your code into the document ready callback, to be sure that the DOM(your form) is loaded before.

$(document).ready(function() {
 //Code
});

You have to remove your existing .submit() from the submitHandler and place it outside the validation initialization but inside ready. Then inside the submitHandler you only call form.submit(); With form.submit(); you trigger submit, the other one is then fired.

Or you place your $.ajax directly into submitHandler.

The way you do it now, you only add the event listener at the time you click your submit button. Thats actually to late. Directly after that your form gets submitted without ajax.