Demo of validating userid

Userid

List of userid Not available

abcdefg , plus2net, siteadmin

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

HTML

<input type=text name=userid  id=userid class='form-control'>

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');
	/////////////////
	var userid=$('#userid').val();
$.post('validation-userid-server-endck.php',{'userid':userid,'type':'userid'},function(return_data){
	
if(return_data.form_status=='NOTOK'){
	$('#userid').closest('.form-group').removeClass('has-success');
	$('#userid').closest('.form-group').addClass('has-error');
$('#msg_userid').removeClass('bg-success').addClass('bg-danger');
	$('#msg_userid').html("<span class='glyphicon glyphicon-remove' aria-hidden='true'></span>"+return_data.msg);
}else{
$('#userid').closest('.form-group').removeClass('has-error');
$('#userid').closest('.form-group').addClass('has-success');
	$('#msg_userid').removeClass('bg-danger').addClass('bg-success');
	$('#msg_userid').html("<span class='glyphicon glyphicon-ok'></span> userid not in use");
}
}, "json");
	///////////////
	$('#userid').closest('.form-group').addClass('form-group has-success has-feedback');
	$('#msg_userid').removeClass('bg-danger').addClass('bg-success');
	$('#msg_userid').html("<span class='glyphicon glyphicon-ok'></span> Valid userid address");
  }else{
	$('#userid').closest('.form-group').removeClass('has-success');
	$('#userid').closest('.form-group').addClass('has-error');
	$('#msg_userid').removeClass('bg-success').addClass('bg-danger');
	$('#msg_userid').html("<span class='glyphicon glyphicon-remove' aria-hidden='true'></span>Not a valid userid address ( client )");
}  
$('#msg_userid').show();

});
////////////
})
</script>

PHP

<?Php
error_reporting(0);// With this no error reporting will be there
///////////////////////
$elements=array("form_status"=>'OK',"userid"=>'T',"msg"=>'');
$userid=$_POST['userid'];

if(!ctype_alnum($userid)){
$elements['msg'].=$msg."Please use characters or  numbers for your User ID<BR>";
$elements['form_status']= "NOTOK";
$elements['userid']='F';
}
if ( strlen($userid)< 6 OR strlen($userid) > 10) {
$elements['msg'].="User ID should not be less than 6 and more than 10 character length<BR>";
$elements['form_status']= "NOTOK";
$elements['userid']='F';
}
/// Checking from database ////
require "config.php"; // database connection string 
$count=$dbo->prepare("select userid from site_member_table where userid=:userid");
$count->bindParam(":userid",$userid);
$count->execute();
$no=$count->rowCount();
if($no >0 ){
$elements['msg'].="User Name already exists. Choose a different User Name<br>";
$elements['form_status']= "NOTOK";
$elements['userid']='F';
}
////////////
echo json_encode($elements);
?>

PDO: read more on Database connection string.