Demo of validating Email address

After entering email address press Tab or click outside text but to trigger blur event of the text box.

HTML

<div class="row">
  <div class="col-md-4"><span class='form-group'>
    <label class='col-md-3 control-label' for='email'>Email</label>
    <span class='col-md-8'><input type=text name=email  id=email class='form-control'> </span></span></div>
<div class="col-md-4"> 
  <div id=msg_email></div>  
</div></div>

jquery

<script>
$(document).ready(function() {
////////////////////
$('#email').blur(function(){
var email=$('#email').val();
var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if(regex.test(email)){
	$('#email').closest('.form-group').removeClass('has-error');
	$('#email').closest('.form-group').addClass('has-success');
	$('#msg_email').removeClass('bg-danger').addClass('bg-success');
	$('#msg_email').html("<span class='glyphicon glyphicon-ok'></span> Valid Email address");
  }else{
	$('#msg_email').html('Failed');  
	$('#email').closest('.form-group').removeClass('has-success');
	$('#email').closest('.form-group').addClass('has-error');
	$('#msg_email').addClass('bg-danger');
	$('#msg_email').html("<span class='glyphicon glyphicon-remove' aria-hidden='true'></span>Not a valid Email address");
}  
$('#msg_email').show();
});
///////////////////
})
</script>