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: 
If you want to submit the form manually, you have to bypass jQuery bound event. You can do it in either of these ways:

```
$('#form_id')[0].submit();

```

or

```
$('#form_id').get(0).submit();

```

**[0] or get(0) gives you the DOM object instead of the jQuery object.**
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>

```