submit form after validation jquery

Question

I have following form:

<form id="form" action="comments.php" method="post">
  <ul>
    <li><div class="formbox_titles">Name</div><input type="text" name="name" class="required comm_input" /></li>
    <li><div class="formbox_titles">Email</div><input type="text" name="email" class="required comm_input"/></li>
    <li><div class="formbox_titles">Message</div><textarea name="message" class="required comm_text"></textarea></li>
    <li><input type="submit" value="Submit"></li>
  </ul>
</form>

and following JQuery for form submission:

target: '#preview', 
  success: function() { 
  $('#formbox').slideUp('fast'); 
}

Now the problem is that I also have form validation JQuery code

$().ready(function() {
    // validate comment form
    $("#form").validate({ 
    });
});

Both of them work great and form does popup warning that all three fields cant be empty but the date inside form is submitted into database anyway. Im using following code for form validation http://bassistance.de/jquery-plugins/jquery-plugin-validation/ So the question is how to add first jquery inside second, so first will be executed once the required fields are filled?

Hope someone will help. Thanks.

Answer 1

From your example, I am not clear about the control flow of your page, however, I am assuming you are calling the submit() method somewhere. After you have validated the form and before you submit it, check it's validation with the valid() method. Your code should look something like this:

$("#form").validate();
if ($('#form').valid())
    $('#form').submit();