Home Tutorial Jquery jQuery check username availability using JSP

 
 

jQuery check username availability using JSP
Posted on: August 16, 2010 at 12:00 AM
Advertisement
In this section, you will learn to check username availability from database using JSP & jQuery.

jQuery check username availability using JSP

In this section, you will learn to check username availability from database using JSP & jQuery. In the given below example, a username input field is given, when you type username it checks whether it is available means it shouldn't exist in the database. In spite of that, it also checks that the value entered shouldn't be special character. It also restrict from pressing 'space bar' or 'enter' keys.

registration_form.html

<html>
<head>
<title>Registration Form</title>
<style type="text/css">
.style1 {
text-align: left;
}
.style2 {
text-align: left;
color: #0000FF;
}
.style3 {
color: #0000FF;
}
.style4 {
color: #FF0000;
}
</style>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//called when key is pressed in textbox
$("#inputString").keypress(function (e)
{
$("#error").hide();
$("#autoSuggestionsList").hide();
//if the letter is not digit then display error and don't type anything
if( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57)
&& (e.which<65 || e.which>90)&& (e.which<97 || e.which>122))
{
//display error message
$("#error").html("No Special Characters.Only number & alphabets").show();
return false;
}
});});
function lookup(inputString) {
if(inputString.length <5) {
$('#suggestions').show();
$('#autoSuggestionsList').hide();
} else {
$('#suggestions').hide();
$.post("CheckUsername.jsp",{user: ""+inputString+""},function(data){
$('#autoSuggestionsList').html(data).show();
});
}
}

</script>
</head>

<body>
<form>
<h2 class="style2">&nbsp;<strong>Registration Form</strong></h2>
<h4 class="style4">
---------------------------------------------------------------</h4>
<h4><span class="style3">Enter desired username :</span>
<input name="Text1"type="text" id="inputString"
style="height: 20px" onkeyup="lookup(this.value);"/>
</h4><font color="red">
<div id="suggestions" style="display: none;">
Value must be greater than 4 characters</div>
<div style="display: none;" id="autoSuggestionsList"></div>
<div style="display: none;" id="error"></div>
</font>
</form>
</body>

</html>

OUTPUT

If you enter special characters or less than 4 characters ,it will display:

If you enter username which is already available it will display :

Download Source Code

Advertisement

Related Tags for jQuery check username availability using JSP:


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: August 16, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com