jQuery - why ajaxForm bypasses the validation procedure?

Question

Hello all,

I have the following code snippet:

$(document).ready(function () {
      // bind 'regFormBody' and provide a simple callback function
      $('#regFormBody').ajaxForm(function() { 
          alert("Thank you for your comment!"); 
      }); 

      // validate the #regFormBody form when it is submitted
      $("#regFormBody").validate({
        submitHandler: function(form) { 
          alert('form is submitted');
        },        
        rules: {
          ...
        },
        messages: {
          ...
        }
      });
}      

The problem is that after I add the

    // bind 'regFormBody' and provide a simple callback function
    $('#regFormBody').ajaxForm(function() { 
        alert("Thank you for your comment!"); 
    }); 

The form validation doesn't work at all. I always see the message alert('form is submitted') even without entering any information to form.

May you tell me how to solve this problem?

Thank you

Answer 1

You can expand your options object for .ajaxForm(), like this:

$('#regFormBody').ajaxForm({
  beforeSubmit: function() {
    return $('#regFormBody').valid();
  },
  success: function() { 
    alert('Thanks for your comment!'); 
  } 
});

This will kick off validation before submitting, and if it's not .valid() it'll stop the submit from happening like you want.