Google+ Followers

Connect

Get Updates Via Email

Enter your email address:

Delivered by FeedBurner

Sunday, 22 June 2014

Input Text Validation using BootStrap CSS and JQuery

HTML Code:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta charset="utf-8">
  <title>Text Input Validation</title>
</head>
<body>
  <strong>Enter any Data:<strong><br/>
<input type="text" class="btn-lg btn-default" id="test"/>
  <span id='testvalid'></span>
</body>
</html>

JQuery Script Code

$(document).ready(function(){
   
  //Blur Event checks the input field when it loses focus
  
  $('#test').blur(function(){
   
    //checks text value empty
    if($(this).val()==''){
      
     $('#test').addClass("btn-lg btn-danger");
      $('#testvalid').html("<span style='color:white;background-color:maroon;border-radius:7px;border-width:10px;box-shadow: 3px 3px 5px #999'>&nbsp; &#x2717 &nbsp;</span>");   
     
    }    
    else{
      $('#testvalid').html('');
      $('#test').addClass("btn-lg btn-default");
      
  
    }                  
  });
  
  //keyup event checks user giving entering data
  $('#test').keyup(function(){
        
    if($(this).val()!=''){
   $('#testvalid').html('');
      $('#test').removeClass("btn-danger");  
    }
                  
  });

});

Output:

Demo: 



Click here to Live Preview