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

1 comment :

  1. I have read your blog its very attractive and impressive. I like it your blog.

    Java Online Training Java EE Online Training Java EE Online Training Java 8 online training Core Java 8 online training

    Java Online Training from India Java Online Training from India Core Java Training Online Core Java Training Online Java Training InstitutesJava Training Institutes

    ReplyDelete

Share this to your friends