  | 
		 		   | 
	  	    
          
            
			
	
			
			 
                Code (PHP) 
<form id="frm_login" method="post" class="form-element">
      <div class="form-group has-feedback">
        <input type="text" class="form-control" name="username" id="username" placeholder="Username" autocomplete="off" required>
        <span class="ion ion-email form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="password" class="form-control" name="password" id="password" placeholder="Password" autocomplete="off" required>
        <span class="ion ion-locked form-control-feedback"></span>
      </div>
      <div class="row">
        <!-- /.col -->
        <div class="col-12 text-center">
          <button type="submit" id="btn-login" name="btn-login" class="btn btn-info btn-block ">SIGN IN <i class="fa fa-fw fa-arrow-circle-right"></i></button>
        </div>
        <!-- /.col -->
      </div>
              <div id="msg_alert">
        <!-- error will be shown here ! -->
        </div>
    </form>
 
Code (JavaScript) 
$('document').ready(function()
{ 
     /* validation */
	 $("#frm_login").validate({
      rules:
	  {
			password: {
			required: true,
			},
			username: {
            required: true,
            },
	   },
       messages:
	   {
            password:{
                      required: '<div class="alert alert-error">Please enter your password</div>'
                     },
            username: '<div class="alert alert-error">Please enter your username</div>',
       },
	   submitHandler: submitForm	
       });  
	   /* validation */
	   
	   /* login submit */
	   function submitForm()
	   {		
			var data = $("#frm_login").serialize();
				
			$.ajax({
				
			type : 'POST',
			url  : 'login_process.php',
			data : data,
			beforeSend: function()
			{	
				$("#msg_alert").fadeOut();
				$("#btn-login").html('please wait, processing   <img src="assets/img/loader.gif" />').attr("disabled", true);
			},
			success :  function(response)
			   {						
					if(response==1){
						$("#btn-login").html('please wait, processing   <img src="assets/img/loader.gif" />').attr("disabled", true);			
						setTimeout(' window.location.href = "chooseproperty"; ',3000);
					}
					else{
									
						$("#msg_alert").fadeIn(1000, function(){						
				        $("#msg_alert").html('<div class="alert alert-error"> '+response+' </div>');
						$("#btn-login").html('Sign in  <i class="icon-signin"></i>').attr("disabled", false);
									});
					}
			  }
			});
				return false;
		}
	   /* login submit */
});
 
 
  Tag : PHP, MySQL, Ajax, jQuery               
                        | 
           
          
            | 
			
                             | 
           
          
            
              
                   | 
                   | 
                   | 
               
              
                   | 
                
                    
                      | Date :
                          2018-02-22 17:06:26 | 
                      By :
                          fourcasia | 
                      View :
                          679 | 
                      Reply :
                          2 | 
                     
                  | 
                   | 
               
              
                   | 
                   | 
                   | 
               
              | 
           
          
            | 
			 | 
           
         
	    
		             | 
		
			  |