Client side validations become very important when submitting data on a web page. Here is a practical scenario. We have an input box and it must accept only numbers, and it should not allow other characters as input. We will validate the contents of the input box at the client side before calling a post back event.
The Markup and Script
<html>
<head></head>
<body>
<div>
Enter only Numbers: <asp:TextBox ID="txtNumbers" value="" runat="server"
onkeypress="javascript:return isNumber (event)" ></asp:TextBox>
</div>
</body>
<script>
// WRITE THE VALIDATION SCRIPT IN THE HEAD TAG.
function isNumber(evt) {
var iKeyCode = (evt.which) ? evt.which : evt.keyCode
if (iKeyCode != 46 && iKeyCode > 31 && (iKeyCode < 48 || iKeyCode > 57))
return false;
return true;
}
</script>
</html>
Overview
In the head tag we have the JavaScript block with a function named as “isNumber()”, which takes a Keyboard event as parameter. The parameter will be checked against “Ascii KeyCodes”.
Ascci stands for “American Standard Code for Information Interchange”.
Check KeyCode
Individual key events will be checked for each character entered in the textbox.
The code “var iKeyCode = (evt.which) ? evt.which : evt.keyCode” works like a conditional “if…else”. This piece of code can also be written in this way.
The code “var iKeyCode = (evt.which) ? evt.which : evt.keyCode” works like a conditional “if…else”. This piece of code can also be written in this way.
Var iKeyCode;
If (evt.which)
iKeyCode = evt.which;
Else
iKeyCode = evt.keyCode; // KEYWORDS ARE CASE SENSITIVE.
The value in iKeyCode will be checked against a range of Ascii codes to make sure it’s a number (numeric value). The function will return “true” or “false” based on the entered value. No value will be displayed on the “textbox” control if the condition is returned as “false”.
The input control in the body tag accepts the user entered values, which calls the JavaScript function “isNumber()” on its “onkeypress” event. So every time a user tries to enter a value other than numbers, the field won’t accept the value.
Thanks
Ziad Sowan
No comments:
Post a Comment