Question

I make an ajax call and return some JSON when my user submits a form which is part of my .submit() handler.

I am also trying to attach some validation to this form now.

The result I am getting with the below code is that I do receive the “Field is required” error message, but the form is being submitted anyway.

// attaching some validation to our form.
$("#myForm").validate();

// submit our form and do stuff
$("#myForm").submit( function(){

// I have an ajax request I need to make here, not relevant for the example.

});

<form id="myForm">

Foo: <input type="text" name="foo" id="foo" class="required" />

</form>

Answer 1

You can supply a custom handler (from documentation):
http://docs.jquery.com/Plugins/Validation/validate#options

$(".selector").validate({
   submitHandler: function(form) {
     $(form).ajaxSubmit();
   }
})

You can also use the .valid() function that returns a boolean.

$("#myForm").submit( function(e){
    if($("#myForm").valid() {
        .... do stuff
    } else {
        e.preventDefault();
    }
});