Abakada ~ Back to Basics

---

The following is a sample validation routine that submits the form only when a text field does not contain letters or characters other than a positive floating-point number — a number that can contain decimals.

Now, let's see how this is done. Basically, there are two handlers that test the entry:

• one as the user types in a key, that is called on each onkeydown event while in the text field,
• and one that checks the entire string for entries other than digits and a period onsubmit, when the user sends the form.

<script language="JavaScript">
<!--
function isDigit ( evt ) {
   var keyCode = evt.which ? evt.which : evt.keyCode;
   digit = !isNaN ( parseInt ( String.fromCharCode ( keyCode ) ) ) || 
      ( keyCode == 190 || keyCode == 110 ) || 
      ( keyCode >= 8 && keyCode <= 46 &&
      keyCode !=16 && keyCode !=32 );
   digit = ie4up ? digit || ( keyCode >= 96 && keyCode <=105 ) : digit;
   return ( digit );
}
function validateNumber ( num ) {
   var dot = 0;
   for ( n=0; n < num.length; n ++ ) {
      digit = num.charCodeAt ( n ) >=48 &&
         num.charCodeAt ( n ) <=57 || num.charCodeAt ( n ) ==46;
      if ( !digit ) {
         alert ( 'No way, sorry.' );
         theForm.theField.select ( );
         return false;
      }
      if ( num.charCodeAt ( n ) == 46 ) {
         dot ++ ;
         if ( dot>1 ) {
            alert ( 'Invalid decimals, sorry.' );
            theForm.theField.select ( );
            return false;
         }
      }
   }
   return true
}
//-->
</script>

<form name="theForm"
   onsubmit="return validateNumber ( this.theField.value )">
<input name="theField" onkeydown="
   if ( !isDigit ( event ) ) {
      alert ( 'Oops! numbers only please.' );
      return false;
   }">
</form> 

As the user types in a key, the function isDigit ( ) is called and tests for the following:

• if the character can return a valid integer

  !isNaN ( parseInt ( String.fromCharCode ( keyCode ) ) ) 

  • fromCharCode ( keyCode ) returns the ASCII character of the pressed key
  • parseInt ( ... ) returns an integer converted from that character, and returns the value NaN ( not a number ) if the character cannot be converted to a number
  • isNaN checks if the value returned by parseInt is NaN, or more correctly, ! isNaN checks if the value returned is not NaN
  
  
• if the keyCode value is 190 or 110, which correspond to the period in both the regular and numeric keypad, respectively.

   ( keyCode == 190 || keyCode == 110 ) 

• and, for Internet Explorer^® only, if the event's keyCode value is between 96 and 105. These correspond to the Unicode values returned by the numeric keypad digits, which does not return keyCode values ( returns 0 ) in Netscape^® .

  digit = ie4up ? digit || ( keyCode >= 96 && keyCode <=105 ) : digit;
  

The handler returns false, and in effect disallows input, when any character other than the digits 0 thtu 9 or a period are entered into the text field.

The keyCode values between 8 and 46 represent the keyboard navigation and editing keys — such as backspace, enter, shift, escape, arrow keys, home, end, insert, delete, etc. — and must be included to bypass the test.

When the form is submitted, the function validateNumber ( ) is called, which loops thru the entire string, tests the Unicode value of each character using the charCodeAt method, and returns false ( cancels the submission ) at the first occurrence of a non-digit or more than one period it encounters in the given string.

This ensures that in cases wherein the text input accepts an invalid entry that is not trapped at the field-level, such as the entry having more than one decimal separator, the form-level handler will still invalidate the submission.

Note, however, that the behavior of this validation routine has not been identified in cases of operating system and browser combinations that do not conform to the Unicode standard and may return non-standard keyCode values.

Validating Against a Data Type ( Web Forms )   Web Forms Validation