forms - submitHandler is not triggered although it is valid

Question

I AJAXified commenting system so when Post Comment button is clicked ajax call is made instead of the original form submission. Thanks to my other question .submit doesn't work if the bind object was refreshed by ajax this works now even if the submit button is refreshed.

Now I want to validate the form before submitting but I cannot make it work. The submitHandler option is not called even though the form is valid. The alert( "Valid: " + commentform.valid() ); is triggered and after the the original submit is performed not the ajax one.

The javascript to submit the form looks like

jQuery(document).ready(function($){
        $('#content_container').on("submit","#commentform",function(){
                var commentform=$('#commentform'); // find the comment form

                console.log('Post Comment button was clicked');     


var validator = $("#commentform").validate({ 
    onsubmit: false,
    rules: { 
        author: "required", 
        email: { required: true, email: true }, 
        url: { url: true    }, 
        comment: "required" 
    }, 
    messages: { 
        author: "Please enter your name",   
        email: { required: "Please enter an email address", 
        email: "Please enter a valid email address" }, 
        url: "Please enter a valid URL e.g. http://www.mysite.com", 
        comment: "Please include your comment" 
    } ,

    submitHandler: function(form) {  // The jQuery.validate plugin will invoke the submit handler if the validation has passed.
            alert( "Valid (submitHandler): " + form.valid() );
            console.log("before exit");
            return;
            console.log("after exit");
        },
    invalidHandler: function(event, validator) {
            alert( "Valid (invalidHandler): " + form.valid() );
            console.log("before exit");
            return;
            console.log("after exit");
        }
});
alert( "Valid: " + commentform.valid() );
return;

        $.ajax({
            type: 'post',
            url: formurl,
            data: formdata,

Could someone suggest how to make the ajax call to submit form after the validation?

Answer 1

In this case, you could try this:

    jQuery(document).ready(function($){
         $('#content_container').on("submit","#commentform",function(){
             var commentform=$('#commentform'); // find the comment form

             console.log('Post Comment button was clicked');     


     var validator = $("#commentform").validate({ 
        onsubmit: false,
        rules: { 
            author: "required", 
            email: { required: true, email: true }, 
            url: { url: true    }, 
            comment: "required" 
        }, 
        messages: { 
            author: "Please enter your name",   
            email: { required: "Please enter an email address", 
            email: "Please enter a valid email address" }, 
            url: "Please enter a valid URL e.g. http://www.mysite.com", 
            comment: "Please include your comment" 
        } 
    });
    if (commentform.valid()){
        //Your ajax to post the form
        $.ajax({
                type: 'post',
                url: formurl,
                data: formdata,
    }
    else{
       //form is not valid.
    }
    return false;// stop the form submission and refresh the page.
  });

});

You don't need the submitHandler and invalidHandler if you validate the form manually to send an ajax request.

This works but I recommend you to think about your current design to see if it's possible to avoid removing old forms with new forms and has to rebind the .validate() again everytime.