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: 
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();

```
You can use submitHandler from JQuery form validate plugin

```
<script type="text/javascript" src="resources/jquery.min.js" ></script> 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
    $(".form").validate({
        rules: {
            userName: {
                required: true
            },
            password: {
                required: true
            }
        },
        messages: {
            userName: {
                required: "specify userName"
            },
            password: {
                required: "specify password"
            }
        },
        errorClass: "help-inline text-danger",
        errorElement: "span",
        highlight: function(element, errorClass, validClass) {
            $(element).parents('.form-group').addClass('has-error');
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).parents('.form-group').removeClass('has-error');
            $(element).parents('.form-group').addClass('has-success');
        },
        submitHandler: function(form,e) {
            e.preventDefault();
            console.log('Form submitted');
            $.ajax({
                type: 'POST',
                url: 'authenticate.jsp',
                dataType: "html",
                data: $('form').serialize(),
                success: function(result) {
                    window.location.href = "dashboard.jsp";
                },
                error : function(error) {

                }
            });
            return false;
        }
    });

});  
</script>

```