In this article I will explain with an example, how to perform validation using
JavaScript in HTML.
HTML Markup
The HTML Markup consists of following elements:
TextBox – For capturing user input.
Here, three HTML Input TextBoxes are used for performing following validations:
1. Allow only Numeric character.
2. Allow only Alphabetic character.
3. Allow only Alphanumeric characters.
The HTML Input 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 HTML Input TextBoxes have also assigned with the
JavaScript onpaste event handler, where FALSE is returned which disables the PASTE operation in the HTML Input TextBox.
SPAN – For displaying Error Message.
Three SPANs are used for displaying Error Message for their respective HTML Input TextBoxes.
Each SPANs have been set with visibility to hidden.
Numbers:
<input name="txtNumeric" type="text" id="txtNumeric" onkeyup="keyUP(event.keyCode)" onkeydown="return isNumeric(event.keyCode);" onpaste="return false;" />
<span id="lblNumeric" style="color:Red;visibility:hidden">Only Numeric Characters Allowed</span><br />
<br />
Alphabets:
<input name="txtAlphabets" type="text" id="txtAlphabets" onkeydown="return isAlphabet(event.keyCode);" onpaste="return false;" />
<span id="lblAlphabets" style="color:Red;visibility:hidden">Only Aphabetic Characters Allowed</span><br />
<br />
Alphanumeric:
<input name="txtAlphaNumeric" type="text" id="txtAlphaNumeric" onkeydown="return isAlphaNumeric(event.keyCode);" onpaste="return false;" />
<span id="lblAlphanumeric" style="color:Red;visibility:hidden">Only Alphanumeric Characters Allowed</span>
Validation 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 HTML Input 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 SPAN element.
isAlphabet
This function gets executed when input is captured in the HTML Input 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 SPAN element.
isAlphanumeric
This function gets executed when input is captured in the HTML Input 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 SPAN element.
<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").style.visibility = "visible";
} else {
document.getElementById("lblNumeric").style.visibility = "hidden";
}
return res;
}
function isAlphabet(keyCode) {
var res = ((keyCode >= 65 && keyCode <= 90) || keyCode == 8);
if (!res) {
document.getElementById("lblAlphabets").style.visibility = "visible";
} else {
document.getElementById("lblAlphabets").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").style.visibility = "visible";
} else {
document.getElementById("lblAlphanumeric").style.visibility = "hidden";
}
return res;
}
</script>
Keyboard Keys ASCII (KeyCode) Chart
![TextBox Validation using JavaScript]()
Screenshot
![TextBox Validation using JavaScript]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
