Demo of validating userid

Userid

• Length 6 to 10 char
• Only letters and numbers
• /^([a-zA-Z0-9]){6,10}$/

After entering userid 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='userid'>userid</label>
    <span class='col-md-8'><input type=text name=userid  id=userid class='form-control'> </span></span></div>
<div class="col-md-4"> 
  <div id=msg_userid></div>  
</div></div>

jquery

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