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>