validate form using jquery validation before submitting through ajax

Question

I am trying to submit a form using Ajax to a certain page and then get the message back. I am trying to validate the form using jqueryvalidation plug-in. I am using following code for submitting the form through Ajax.

<script type ="text/javascript">

jQuery(document).ready(function() {

  jQuery("#footercontact").submit(function(event) {
    form = $('#footercontact').serialize();
    $('#footercontact').validate();
    $.ajax({
      type: 'post',
      url: '<?php echo base_url();?>index.php/welcome/test',
      data: form,
      dataType: 'html',
      success: function(data) {
        $("#contactname").val('Name');
        $("#contactemail").val('Email');
        $("#contactmessage").val('Message');
        $("#contactsuccess").html(data);
      }
    });
    event.preventDefault();
  });
});

</script>

Currently this code is directly posting the code without any validation.If there is any thing another you need to know please ask me. And if you know any other method for validating the form before submitting it through Ajax then please Help. here is html code of form

<form name="footercontact" id="footercontact" method="POST" action="">

  <input type="text" id="contactname" name="name" onblur="if(this.value=='')this.value='Name';" onfocus="if(this.value=='Name')this.value='';" value="Name" class="required">

  <input type="text" id="contactemail" name="email" onblur="if(this.value=='')this.value='Email';" onfocus="if(this.value=='Email')this.value='';" value="Email" class="required email">

  <textarea name="message" id="contactmessage" cols="" rows="" onblur="if(this.value=='')this.value='Message';" onfocus="if (this.value=='Message')this.value='';" value="Message" class="required"></textarea>

  <input name="submit" type="button" onclick="jsvalidate()" value="Submit" id="submitsave">

</form>

Answer 1

Use $('#footercontact').valid() which return boolean .

jQuery(document).ready(function() {
  jQuery("#footercontact").submit(function(event) {
    form = $(this).serialize();
    $(this).validate();
    if (!$(this).valid()) return false;
    $.ajax({
      type: 'post',
      url: '<?php echo base_url();?>index.php/welcome/test',
      data: form,
      dataType: 'html',
      success: function(data) {
        $("#contactname").val('Name');
        $("#contactemail").val('Email');
        $("#contactmessage").val('Message');
        $("#contactsuccess").html(data);
      }
    });
    event.preventDefault();

  });
});