Question

I have tried to validate the form using the jquery.validate plugin before being executed by ajax, but it failed because the ajax submit is working when using validate function.

Here is my form:

<form>
 <p><label for="cname">Name</label><em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" /></p>
   <p><label for="cemail">E-Mail</label><em>*</em><input id="cemail" name="email" size="25"  class="required email" /></p>
   <p><label for="curl">URL</label><em></em><input id="curl" name="url" size="25"  class="url" value="" /></p>
   <p><label for="ccomment">Your comment</label><em>*</em><textarea id="ccomment" name="comment" cols="22"  class="required"></textarea></p>
   <p><input class="submit" type="submit" value="Submit"/></p>
 </form>

And my jquery code:

$('form').validate();
$('form').submit(function() {
  alert($(this).serialize());
  return false;
});

here is my fiddle: http://jsfiddle.net/ongisnade/tzFzR/

How to make form validate before ajax submited?

Answer 1

Use .valid() to check before using .serialize().

// Initialize
$('form').validate();

// Bind
$('form').submit(function() {
    if($('form').valid())
        alert($(this).serialize());
    else
        alert("Invalid");
    return false;
});​

Fiddle: http://jsfiddle.net/eHD4g/

Or as Sparky672 said, use the submitHandler attribute:

$('form').validate({
    submitHandler: function(form) {
        alert($('form').serialize());
        return false;
    }
});

Fiddle: http://jsfiddle.net/eHD4g/2/