jquery validation with ajax example

ajax

  <script type="text/javascript">
            $('document').ready(function(){

            $('#form').validate({
                    rules:{
                        "contact_name":{
                            required:true,
                            maxlength:40
                        },
                        "contact_email":{
                            required:true,
                            email:true,
                            maxlength:100
                      
                        },
                       

                        "contact_message":{
                            required:true
                        }},

                    messages:{
                        "contact_name":{ 
                            required:"Name is necessary."},

                        "contact_email":{
                            required:"Email is necessary.",
                            email:"Please provide valid email address."
                        },
                         "contact_message":{
                            required:"Provide us the description.",
                        }},

                          submitHandler: function(form){
                     
                      var data = {"action": "test"}; 
                      var mydata = $("#form").serialize()+"&" + $.param(data);
                      $.ajax({
                             type: "post",
                             url: "response.php",
                             data: mydata,
                             error:function (){ 
                                  $(".the-return").html("Could not Send Message Now. Try later !"); 
                                },
                             success: function(response){
                                 $(".the-return").html("Message send sucessfully !!"); 
                                }
                                });
                            return false ;
                            
                            }
                
            })
                        
        });
        </script> 

<div class="map-section">
 
    <section class="contact-section">
        <div class="container">
            <div class="contact">
                <div class="row">
                    <form name="form" id="form" method="post">
                        <div class="row">
                            <div class="half-section">
                                 <div class="row">
                                    <label for="contact_name">Name:</label>
                                    <input type="text" name="contact_name" placeholder="Your Name ...." id="contact_name" class="required" />
                                 </div><!-- row -->
                                 <div class="row">
                                    <label for="contact_email">Email:</label>
                                    <input type="email" name="contact_email" placeholder="[email protected] ......" id="contact_email" class="required"/>
                                 </div><!-- row -->
                                 <div class="row">
                                    <label for="contact_message">Message:</label>
                                    <textarea name="contact_message" placeholder="Your Message Here ......" id="contact_message" class="required"></textarea>
                                 </div><!-- row -->
                            </div><!-- half-section -->
                            <div class="half-section">
                                <h1 class="title">Address</h1>
                                <p>
                                </p>
                                <h1 class="title">Contact Us</h1>
                                <p>
                                </p>
                            </div><!-- half-section -->
                        </div><!-- row -->
                        <div class="row">
                             <button type="submit" name="contact_submit" id="save" class="btn btn-blue pull-right">Send Message</button>
                        </div><!-- row -->
                    </form><!-- formContact -->
                </div><!-- row -->
            </div><!-- contact -->
        </div><!-- container -->
    </section><!-- contact-section -->
 </div>