ajax - Jquery submit form without reloading page -

i'm not familiar jquery. i'm trying make form submitted in background without reloading page. have hidden div shows , hides on click, inside div there's form.

i have 2 problems:

1) when form validation fails, form still submitted. tried put validation , submission codes in condition if(validation == valid) { $.ajax.... } not work properly.

2) after form submitted div automatically hides, successful message cannot seen.

here's code:

$().ready(function() {       // validate form when submitted, using validation plugin.     var validator = $("#contactform").validate({         errorcontainer: container,         errorlabelcontainer: $(),     onkeyup: false,     onclick: false,     onfocusout: false,     errorplacement: function (error, element) {  error.insertbefore(element);     }        }); });  $(function() {      //this submits form $('input[type=submit]').click(function() {         $.ajax({             type: "post",             url: "contact.php",             data: $("#contactform").serialize(),             beforesend: function() {                 $('#result').html('<img src="loading.gif" />');             },             success: function(data) {                 $('#result').html(data);             }          })     }) })   //this shows , hides div onlcick $(document).ready(function(){            $(".slidingdiv").hide();          $(".show_hide").show();      $('.show_hide').click(function(){      $(".slidingdiv").slidetoggle();      }); });  

rather bind click event (input[type=submit]) should bind submit event form.

$("form").on("submit", function (e) {     e.preventdefault(); 

i'm not sure validation. if runs asynchronously, callback required. if runs synchronously, when triggered? seems should done when form submitted unless validation plugin on own:

$("form").on("submit", function (e) {     e.preventdefault();     if ($(this).validate(options)) {         $.ajax 

using e.preventdefault prevent reload , should allow success div display.