This Article explains how to enforce dynamic Validations using Simple JavaScript.
These validations are performed when the user types in the text and does not allow him to input invalid characters.
Below is the Keyboard key ASCII Chart
|
Keys
|
ASCII
|
|
A – Z, a - z
|
65 - 90
|
|
0 - 9
|
48 - 57
|
|
Num0 – Num9
|
96 - 105
|
|
Backspace
|
8
|
TextBox with Only Numeric Characters allowed.
<script type = "text/javascript">
function isNumeric(keyCode)
{
return ((keyCode >= 48 && keyCode <= 57) || keyCode == 8 ||
(keyCode >= 96 && keyCode <= 105))
}
</script>
The above script will ensure that only Numbers (0-9) are entered into the textbox.
But it does not whenever shift key is pressed. So for that you will have to keep a flag and set and reset it whenever shift key is pressed. See below
var isShift=false;
function keyUP(keyCode)
{
if(keyCode==16)
isShift = false;
}
And the updated isNumeric function will be
function isNumeric(keyCode)
{
if(keyCode==16)
isShift = true;
return ((keyCode >= 48 && keyCode <= 57 || keyCode == 8 ||
(keyCode >= 96 && keyCode <= 105)) && isShift == false);
}
The above function will take care that even if shift is pressed
To call the textbox on onkeydown event, see below
Either you add it directly to the TextBox on the aspx page. But in that case Visual Studio will throws a warning though not an issue since Visual studio checks for Server Side events while onkeydown a client side event.
<asp:TextBox ID="txtNumeric" runat="server" onkeyup = "keyUP(event.keyCode)" onkeydown = "return isNumeric(event.keyCode);" onpaste = "return false;"></asp:TextBox>
If you do not want Visual Studio warnings, you can add the same from server side in the following way
txtNumeric.Attributes.Add("onkeydown", "return isNumeric(event.keyCode);");
txtNumeric.Attributes.Add("onpaste", "return false");
txtNumeric.Attributes.Add("onkeyup", "keyUP(event.keyCode)");
You will notice that I have used onpaste event. The onpaste event ensures that the user does not paste some invalid text since the onkeydown event does not fire when the text is pasted.
So the onpaste event does not allow the user to paste any text.
In the similar way you can do the following too.
TextBox with Only Alphabets allowed.
<script type = "text/javascript">
function isAlpha(keyCode)
{
return ((keyCode >= 65 && keyCode <= 90) || keyCode == 8)
}
</script>
The above script will ensure that only Alphabets (A – Z, a - z) are entered into the textbox.
TextBox with Only Alphanumeric Characters allowed.
<script type = "text/javascript">
function isAlphaNumeric(keyCode)
{
return (((keyCode >= 48 && keyCode <= 57)&& isShift == false) ||
(keyCode >= 65 && keyCode <= 90) || keyCode == 8 ||
(keyCode >= 96 && keyCode <= 105))
}
</script>
The above script will ensure that only Alphabets (A – Z, a - z) or Numbers (0 - 9) are entered into the textbox.
Similarly you change the condition by simply adding or removing ASCII Codes on to the above functions
You can get the complete Keyboard key ASCII Codes Chart here .
You can test the above JavaScript here
The Above Script it tested for following browsers
1. Internet Explorer 7
2. Firefox 3
3. Google Chrome
You can download the sample source code here.
TextBoxValidations.zip (1.23 kb)