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 call isn't working, nor exist for the firebug console.

CASE 1 If i put the ajax call at the beginning of the site, it works but the validator plugin isn't seen anymore.

CASE 2 If i put the call inside the submit handler, it doesn't exist and the form is submitted by php.

CASE 3 If i put the code at the end of the page, the contact form is still submitted by php.

Here's the ajax call:

$("#contactform").submit(function(e){
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "formfiles/submit.php",
        data: $(this).serialize(),
        success: function() {
            $('#contactform').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;
});

Anybody knows what's wrong?

Thanks in advance for any help, struggling my head about this.

EDIT For better understand the problem, here's the complete javascript

    $(document).ready(function(){
$("#contactform").validate();      
$(".chapta").rules("add", {maxlength: 0});     



var validator = $("#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) {



   $("#contactform").submit(function(e){
   e.preventDefault();
   $.ajax({
    type: "POST",
    url: "formfiles/submit.php",
    data: $(this).serialize(),
    success: function() {
        $('#contactform').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;
 });
    },

});

 });

EDIT 2

The selectors and all the rest seem's to be fine.

 <form action="#n" class="active" method="post" name="contactform" id="contactform">

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

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.

Answer 3

It is easy. Only do this

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

here set the ajax

}