Abakada ~ Back to Basics

---

The following is a sample validation routine that submits the form only when a text field does not contain digits or characters other than lower- or upper-case letters.

Now, let's see how that 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 letters onsubmit, when the user sends the form.

<script language="JavaScript">
<!--
function isAlpha ( evt ) {
   var keyCode = evt.which ? evt.which : evt.keyCode;
   alpha = ( keyCode >= 'a'.charCodeAt ( ) &&
      keyCode <= 'z'.charCodeAt ( ) ) || 
      ( keyCode >= 'A'.charCodeAt ( ) &&
      keyCode <= 'Z'.charCodeAt ( ) ) || 
      ( keyCode >= 8 && keyCode <= 46 );
   return ( alpha );
}

function validateAlpha ( text ) {
   for ( c=0; c < text.length; c ++ ) {
      alpha = ( text.charCodeAt ( c ) >= 65 &&
         text.charCodeAt ( c ) <=90 ) || 
         ( text.charCodeAt ( c ) >= 97 &&
         text.charCodeAt ( c ) <=122 )
      if ( !alpha ) {
         alert ( 'No way, sorry.' );   
         document.theForm.theField.select ( );
         return false;
      }
   }
   return true;
}
//-->
</script>

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

As the user types in a key, the function isAlpha ( ) is called and tests if the event's keyCode value is between 65 and 90 or between 97 and 122. These correspond to the Unicode values for upper- and lower-case letters of the ISO-Latin character set, respectively.

The handler returns false, and in effect disallows input, when any character other than the letters aA thru zZ are entered into the text field.

Note however, that characters entered thru the numeric keypad ( with NumLock on ) are not trapped at the field level.

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 validateAlpha ( ) 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-letter 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 characters entered from the numeric keypad with NumLock on, 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