Thursday, December 15, 2005

Javascript Input Validation

Previously I had written about input validation in ASP .Net. Since then, I have had a few inquiries regarding input validation using basic JavaScript. In this article I will give a simple example using JavaScript to validate a form input to allow only numbers. First, a warning. Do not rely on Client Side Validation as the only form of input validation for any application. Client side validation can easily be circumvented, causing undesirable results in your application, and lead to possible exploitation in this design vulnerability. Always have some server side validation routine to work with client side validation at the very least, even in a trusted environment.

The goal here is to have a simple form field, with 2 regular un-validated text inputs and 1 validated text inputs. Any non-numeric characters entered into the form field will be cause the Submit action to fail. Validations will only take place on submit to avoid annoying the user with alert boxes on every key press. The code is below

<html>
<head>
<title>Javascript Form Validation with Regular Expression Test</title>
<script language="JavaScript" type="text/JavaScript">
<!--
//Function to validate the input
function validate()
{
     //If anything in our string is not a number, fail validation
     if (!document.form1.input_field.value.match(/^\d+$/))
        {
           //Let the user know they put in bad input, and give focus to the
          //field to be corrected
           alert('invalid input, only numbers allowed');
          document.form1.input_field.value = "";
          document.form1.input_field.focus();
          
          //Return false
          return false;
      }
     
      return true;
}
//-->
</script>
</head>
<body>
<!-- This is the form to be validated, it has two BS text fields (we do not validate), and one
     field that will be validated, specify the validation function as the submit action -->
<form name="form1" method="post" action="" onSubmit="return validate();">
                    BS Field
                    <input type="text" name="textfield1">
                    <br>
                    BS Field
                    <input type="text" name="textfield2">
                    <br>
                    Important field
                    <input name="input_field" type="text">
                    <br>
                    <input type="submit" name="Submit" value="Submit">
</form>
</body>
</html>

Very simple. Of course, more complex validations can take place using better regular expressions. For example, thanks to a thread on the Regular Expression Library, the above example can be modified to validate Social Security Numbers using regular expressions in JavaScript. The modified validate function is below:

//Function to validate the input
function validate()
{
     //If anything in our string is not a number, fail validation
     if (!document.form1.input_field.value.match(/^(?!000)(?!588)(?!666)(?!69[1-9])(?!73[4-9]|7[4-5]\d|76[0123])([0-6]\d{2}|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d{4}$/))
        {
           //Let the user know they put in bad input, and give focus to the
          //field to be corrected
           alert('Invalid SSN format');
          document.form1.input_field.value = "";
          document.form1.input_field.focus();
          
          //Return false
          return false;
      }
     
      return true;
}

1 comment:

Dora said...

Hey that was agrt help
thanx

http://chandradey.blogspot.com