In this article I will explain with an example, how to perform TextBox validation using
JavaScript in ASP.Net.
HTML Markup
The following HTML Markup consists of:
TextBox – For capturing user input.
Here, three TextBoxes are used for performing following validations:
1. Allow only Numeric character.
2. Allow only Alphabetic character.
3. Allow only Alphanumeric characters.
The TextBoxes have been assigned with a
JavaScript onkeydown event handler, which will be used to call different
JavaScript function which accepts the
KeyCode of the pressed key as parameter.
The TextBoxes have also assigned with the
JavaScript onpaste event handler, where FALSE is returned which disables the PASTE operation in the TextBox.
Label – For displaying Error Message.
Three Labels are used for displaying Error Message for their respective TextBoxes.
Each Labels have been set with visibility to hidden.
Numbers:
<asp:TextBox ID="txtNumeric" runat="server" onkeyup="keyUP(event.keyCode)" onkeydown="returnisNumeric(event.keyCode);" onpaste="return false;"></asp:TextBox>
<asp:Label ID="lblNumeric" ForeColor="Red" runat="server" Text="Only Numeric Characters Allowed" Style="visibility: hidden"></asp:Label><br />
<br />
Alphabets:
<asp:TextBox ID="txtAlphabets" runat="server" onkeydown="returnisAlphabet(event.keyCode);" onpaste="return false;"></asp:TextBox>
<asp:Label ID="lblAlphabets" ForeColor="Red" runat="server" Text="OnlyAphabetic Characters Allowed" Style="visibility: hidden"></asp:Label><br />
<br />
Alphanumeric:
<asp:TextBox ID="txtAlphaNumeric" runat="server" onkeydown="returnisAlphaNumeric(event.keyCode);" onpaste="return false;"></asp:TextBox>
<asp:Label ID="lblAlphanumeric" ForeColor="Red" runat="server" Text="Only Alphanumeric Characters Allowed" Style="visibility: hidden"></asp:Label>
Validating TextBox using JavaScript
First a BOOLEAN variable is created and set to FALSE and it will be used to determine whether the Shift key is pressed or not.
isNumeric
This function gets executed when input is captured in the TextBox and it allows only Numeric characters.
Inside this function, a check is performed whether the pressed key is Shift key or not by using KeyCode 16 (Shit key keyCode) and based on that the isShift variable value is set.
Another check is performed which ensures that the pressed key is only Numeric (0-9) key using keyCode of the pressed key.
If validation fails, an Error Message is displayed in Label control.
isAlphabet
This function gets executed when input is captured in the TextBox and it allows only Alphabetic characters.
Another check is performed which ensures that the pressed key is only Alphabetic (A-Z, a-z) key using keyCode of the pressed key.
If validation fails, an Error Message is displayed in Label control.
isAlphanumeric
This function gets executed when input is captured in the TextBox and it allows only Alphanumeric characters.
Inside this function, a check is performed whether the pressed key is Shift key or not by using KeyCode 16 (Shit key keyCode) and based on that the isShift variable value is set.
Another check is performed which ensures that the pressed key is only Alphanumeric (A-Z, a-z) or (0-9) key using keyCode of the pressed key.
If validation fails, an Error Message is displayed in Label control.
<script type="text/javascript">
var isShift = false;
function keyUP(keyCode) {
if (keyCode == 16) {
isShift = false;
}
}
function isNumeric(keyCode) {
if (keyCode == 16) {
isShift = true;
}
var res = ((keyCode >= 48 && keyCode <= 57 || keyCode == 8 || (keyCode >= 96 && keyCode <= 105)) && isShift == false);
if (!res) {
document.getElementById("<%= lblNumeric.ClientID%>").style.visibility = "visible";
} else {
document.getElementById("<%= lblNumeric.ClientID%>").style.visibility = "hidden";
}
return res;
}
function isAlphabet(keyCode) {
var res = ((keyCode >= 65 && keyCode <= 90) || keyCode == 8);
if (!res) {
document.getElementById("<%= lblAlphabets.ClientID%>").style.visibility = "visible";
} else {
document.getElementById("<%= lblAlphabets.ClientID%>").style.visibility = "hidden";
}
return res;
}
function isAlphaNumeric(keyCode) {
if (keyCode == 16) {
isShift = true;
}
var res = (((keyCode >= 48 && keyCode <= 57) && isShift == false) || (keyCode >= 65 && keyCode <= 90) || keyCode == 8 || (keyCode >= 96 && keyCode <= 105));
if (!res) {
document.getElementById("<%= lblAlphanumeric.ClientID%>").style.visibility = "visible";
} else {
document.getElementById("<%= lblAlphanumeric.ClientID%>").style.visibility = "hidden";
}
return res;
}
</script>
Keyboard Keys ASCII (KeyCode) Chart
![TextBox Validation using JavaScript in ASP.Net]()
Screenshot
![TextBox Validation using JavaScript in ASP.Net]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
