Form Validation Using JavaScript

When using an HTML form on a web page, it is important to make sure that all of the information that you request is filled in. It is also important to make sure that the correct information is entered. JavaScript is a client-side web language that can be used to validate the information you request before the form is submitted to your web server for processing.

When used as a client-side language, JavaScript is executed in a user’s browser. This is different from ASP, PHP or other server-side languages, which execute on a web server. As a client-side language, JavaScript can be used to add many interesting interactive features, such as rollover effects, expanding text areas and expanding menus to your web pages.

The only downside is that JavaScript does not work if it is disabled in a user’s browser or if the security level is set to High in Internet Explorer. When security is set to High in IE, all active scripting is disabled in the browser, which means that VBScript, JavaScript and Ajax will not function. Fortunately, very few users disable JavaScript. Although it is always a good idea to validate user input at the source (their browser), if you are developing web pages using a server-side language, such as ASP or PHP, you should always validate the user input once the form is submitted to the server. If JavaScript catches any errors or missing information, the server doesn’t have to do anything but save or process the user data. But if JavaScript is disabled, further data entry problems can be avoided by validating form input on the server.

When using forms on static HTML pages, there usually aren’t a lot of options for validating user input unless you use JavaScript. The following library of JavaScript functions will help you to validate user input while providing friendly and customizable messages when a field has not been correctly filled in.

The following JavaScript function can be copied to to the head section of your HTML form page. The JavaScript code listed below will validate three fields: a Name input field called username, an E-mail Address input field called email and a textarea field called comments.

<script type="text/javascript">
<!--
function validateForm(theForm)
{
  // check to see if username was entered
  if (theForm.username.value == "") 
  {
    alert("Please enter Your Name");
    theForm.username.focus(); 
    return (false);
  }
  
  // check to see if email was entered
  if (theForm.email.value == "") 
  {
    alert("Please enter an e-mail address.\n " +
      "We need it to reply.");
    theForm.email.focus(); 
    return (false);
  }

  // check for valid e-mail address
  if (theForm.email.value.indexOf("@")<1 || 
    theForm.email.value.indexOf(".")==-1 || 
    theForm.email.value.indexOf(",")!=-1 ||
    theForm.email.value.indexOf(" ")!=-1 || 
    theForm.email.value.length<6) 
  {
    alert("Please enter a valid E-mail address.\n" + 
    "Example: myname@domainname.com");
    theForm.email.focus();
    return false
  }
  
  // check to see if comments were entered
  if (theForm.comments.value == "") 
  {
     alert("Please enter some Comments or a Question");
     theForm.comments.focus(); 
     return (false);
  }
  return (true);
}
//-->
</script>

Each input and textarea field needs to be assigned a unique name using the "name=" attribute. JavaScript will use the field name to identify that form element. It is important that the field names used in the form’s HTML code match the variable names used in your JavaScript routines exactly. JavaScript is case sensitive on IE, so make sure that every character in a field name matches exactly.

The username input field might therefore look like this:

<input name="username" type="text" size="50" maxlength="50">

And the comments textarea like this:

<textarea name="comments" cols="50" rows="10"></textarea>

To call the JavaScript validation function whenever a user submits the form, simply add the following JavaScript event to the HTML form tag declaration. This eans that when the form is submitted, the JavaScript function validateForm will be called using the data in the current object "this", which is the form itself.

onsubmit="return validateForm(this)"

The form tag line might look like the following. Be sure to substitute the path to the script you will use to process the form in the action attribute.

<form action="/cgi-bin/contactus.pl" method="post" 
  name="submitForm" onsubmit="return validateForm(this)">

To understand what is being done in the JavaScript form validation routine, let’s take it a step at a time.

1. A user fills in the fields in a form and then clicks on the submit button.
2. Prior to actually submitting the form to your designated processing script, the validateForm JavaScript function is called by the onsubmit event trigger.
3. The first subsection of the validateForm function checks to see if a value exists in the username field. If a value exists, the function continues to the next section. If it does not contain a value, the funtion displays an alert box, which prompts the user to enter a Name and places the cursor on the username field. A False value is also returned to the form, which prevents is from submitting the data to the script identified in the action attribute.
4. Next, we use two routines to validate the e-mail field. The first somply check to see if a vale exists and handles it the same as with the username field. The second attempts to validate the format used for the e-mail address. This prevents someone from simply entering nonsense in the field.
   1. All valid e-mail addresses must have an "@" symbol, so it checks for that.
   2. All valid e-mail addresses must have at least one dot, so it checks for the existance of a dot.
   3. Commas are frequent typos, but are not allowed, so it checks for any commas.
   4. Spaces are not allowed, so i checks for a space.
   5. Finally, a valid e-mail address can be no shorter than 6 characters (a@b.de), so it checks the length.
5. If all inspections pass, a True value is returned and the form sends the data to the e-mail processing script.

If you use this script and find that it does not function as expected, check to make sure that each form field that you want to validate is matched with a validation routine that uses the name attribute for the form field. If you need help troubleshooting any JavaScript issue, try using the JavaScript troubleshooting tool built into FireFox.