Ajaxsubmits the from jquey validation in php

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<!-- Jquery Validation -->
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.js"></script>


<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>




<style>
.register_form{
 
    width: 500px;
    border: 1px solid #cacaca;
    margin:95px 400px;
    padding : 3px;
 
}
</style>

<script>
$(function() {
$( "#datepicker" ).datepicker();

});

$(document).ready(function(){
 
   
 
 

 
 
   var data = $('#form').serialize();  

/*    $('#form').validate({
     
        rules:{
            'u_name':{
             
                required: true,
   
            }
        },
     
         submitHandler: function() {
     
                   $.ajax({
                    type : 'POST',
                    url : '/learn_test/test4.php',
                    data : $('#form').serialize(),
                     dataType: 'html',
                    success : function(data){
                  //  var mydata = JSON.stringify(response);
                    $(".result").html(data);
     
                    },
     
 
   });
 
  }

  });
 
});
*/
                $("#form").validate({
        rules: {
            u_name: {required: true},
            inputEmail : {
                required: true
                },
         
            },
        submitHandler: function(form) {
            request = $.ajax({
                    type : 'POST',
                    url : '/learn_test/test4.php',
                    data : $('#form').serialize(),
                     dataType: 'html',
                    success : function(data){
                  //  var mydata = JSON.stringify(response);
                    $(".result").html(data);
     
                    },
            });
            // Called on success.
            request.done(function(msg) {
                //alert('works');
            });
            // Called on failure.
            request.fail(function (jqXHR, textStatus, errorThrown){
                alert('failed');
                // log the error to the console
                console.error(
                    "The following error occurred: " + textStatus, errorThrown
                );
            });
            return false;
        }
    });


});
</script>


<title>Register Me</title>
<div class="register_form">
<form method="post" id="form">
    <div class="form-group">

        <label for="inputEmail">Email</label>

        <input type="email" class="form-control" name="email" id="inputEmail" placeholder="Email"/>
     
    </div>
 
    <div class="form-group">
        <label for="name">Name: <span>(required)</span></label>
        <input type="text"  name="u_name" class="form-control" id="u_name"/>
    </div>
 
    <div class="form-group">
        <label>Address</label>
          <textarea name="u_address" id="u_address" rows="3" class="form-control"></textarea>
    </div>
 
    <div class="form-group">
        <label>Birthdate</label>  
          <input type="text" name="u_bdate" id="datepicker" class="form-control"/>
    </div>
 
    <div class="form-group">
        <label>Gender</label>  

    <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="gender" value="Male" id="option1"/>Male
    </label>
    <label class="btn btn-primary active">
        <input type="radio" name="gender" value="FeMale" id="option2"/>Female
    </label>
 
    </div>
   </div>
 
   <div class="form-group">
        <label class="">Select Your choice</label>  
       
        <div class="form-control">  
          <label class="checkbox-inline"><input type="checkbox" class="checkbox" value="playing games"  name="hobby[]" />Playing Games</label>
          <label class="checkbox-inline"><input type="checkbox" class="checkbox" value="Reading a Book" name="hobby[]" />Reading a Book</label>
          <label class="checkbox-inline"><input type="checkbox" class="checkbox" value="Watching Movies" name="hobby[]" />Watching Movies </label>
        </div>
   </div>
 
    <div class="form-group">
        <label class="">Select Your Eduction</label>  
        <select name="eductaion" class="form-control">
        <option value="12th pass">12 Pass</option>
        <option value="Graduation">Graduation</option>
        <option value="Post Graduation">Post Graduation</option>
        </select>
       
   </div>
 
   <div class="form-group">
    <button type="submit" class="btn  btn-default" id="btn">Submit</button>
 
   </div>
 

</form>


</div>
<div class="result"></div>

Tweet