jQuery validate before ajaxForm

Question

I am trying to use the "beforeSubmit" option in the jQuery ajaxForm plugin to validate the data, however the form will submit even if there are invalid form fields. Where have I gone wrong? thanks,

$(document).ready(function() { 
function validator(){ 
        $("#commentForm").validate();
}

    $('#commentForm').ajaxForm({ 
        dataType: 'json',
        url: "http://highlandfamilyeyecare.com/contactengine.php",
        beforeSubmit:  validator,
        success:        function(data) { 
            $('ul.form').fadeOut("slow");
            $('ul.form').html(data.formula).slideDown('slow');}
    });
});

And the html:

<ul class="form">


    <li>    
        <form method="post" action="form.php" id="commentForm">

        <label class="white">Your Name</label>
        <input class="text-input required" type="text" name="name" /></li>

    <li>
        <label class="white">Email</label>
        <input class="text-input required email" type="text" name="email"/></li>

    <li>
        <li><input type='submit' value="Submit" />
        </form></li>

</ul>

Answer 1

Per the documentation, the validating function must return false in order to prevent form submission.

Answer 2

The beforeSubmit() function isn't returning anything.

You'll want:

function validator(){ return $("#commentForm").validate(); }

presuming that the $('#commentForm").validate() exists and returns true/false correctly.

Answer 3

Assuming that the validate() method is the validation plugin, This is the right way of doing it. If there are any errors in the validate method, form will not be submitted.

    $('#commentForm').validate({
        errorClass: "invalidField",
        submitHandler: function() {
            $('#commentForm').ajaxSubmit(ajaxFormOptions);
        }
    });

where ajaxFormOptions are your options for submit.