Validating a form using JavaScript regular expressions

Originally written by James Richardson on 02/15/2009

This tutorial will cover basic JavaScript validation using regular expressions. The form we will create will only contain three elements: Username, Email, and Comment. There are many other things you can do with this tutorial example, but we will only be covering a couple basics. We are going to make one form and four functions. One function is for reporting the errors and the other three check to see if each corresponding input passes the regular expression test. Make a new HTML document and name it whatever you want.

Create the form

The first step is to create a basic form that the JavaScript will match to. Make sure the "id" an "name" attributes are named appropriately. These are the attributes that the JavaScript will obtain in order to know what input is being validated. Copy and paste the below code into the body section of your HTML document..

<form action="" onsubmit="return validateForm(this)">
  <p><label id="username">User name:</label><br />
  <input name="username" size="15" maxlength="15" type="text" /></p>
  <p><label id="email">Email:</label><br />
  <input name="email" size="35" maxlength="45" type="text" /></p>
  <p><label id="comment">Comment:</label><br />
  <textarea name="comment"></textarea></p>
<input name="submit" value="Submit" type="submit" />
</form>

Validation form (function #1)

Now we need to create a function that will report any errors. These functions will be placed into your head section of your HTML page. Don't forget your "<script>" tags. I named my function "validateForm." (See code below) First we need to initialize a variable that will contain the error text that will be supplied by the validation functions. I called that variable "errReport." Next we will set the "errReport" variable to equal the validation functions we will create for the inputs. There will be three functions: "validUsername", "validEmail", and "validComment." The parameter in the function is going to reference the form and the name of the input. these will look like the following: "theForm.username", "theForm.email", and "theForm.comment". After we set the variable "errReport"equal to the functions, We will create a conditional "if" statement that will check if the variable "errReport" is containing text. If the condition is met, the alert box will appear reporting the errors that occurred. If the condition is not met, the function will return true and let the form submit.

function validateForm(theForm) {
   var errReport = "";   
   errReport += validUsername(theForm.username);   
   errReport += validEmail(theForm.email);         
   errReport += validComment(theForm.comment);   
   if (errReport != "") {      
      alert("The was a problem with the following field(s):\n" + errReport);   
      return false;
   }
return true;
}

User name validation (Function #2)

Now we need to make the function that validates the username. (See code below) The function parameter is "fld". The "fld" parameter points the function to what is inside the username input field. We now will create two variables. One variable is to initialize the error. The other variable will contain the Regular expression that the field value will be matched to. The first conditional statement will determine if the "fld.value" is empty or not. If the field is empty, the border color will change to red (#ff0000), the username label will change to red (#ff0000)using the "getElementById()" function, and the error variable will be set to the text that will display in the error alert box in the "Validation Form" function. The first "if else" condition will match the field value to the regular expression. The regular expression is an expression that will cause the string to be matched to a certain pattern. The pattern used here is the "/^[a-zA-Z]{5,15}$/" expression. This expression states that only characters a-z, A-Z, and between 5 and 15 characters will pass. If there is a match, the border color and the label color will change back to the normal color and pass the information to the "post" method. The last else statement will execute when the field is does not pass the regular expression match.

function validUsername(fld) {   
   var error = "";   
   var valid = /^[a-zA-Z]{5,15}$/;    
   if (fld.value == "") {      
      fld.style.borderColor = '#ff0000';       
      document.getElementById('username').style.color = "#ff0000";      
      error = " - You forgot to enter a username.\n";   
   } else if(valid.test(fld.value)){      
      fld.style.borderColor = '';       
      document.getElementById('username').style.color = "#000000";   
   } else {      
      fld.style.borderColor = '#ff0000';       
      document.getElementById('username').style.color = "#ff0000";      
      error = " - Your User name can only be A-Z and 5-15 characters.\n";   
   }
return error;
}

Email Validation Function (Function #3)

Now we need to make the email validation function. (See code below) This function is exactly the same as function #2 in the previous paragraph. The only difference is that the names are changed from username to email, and the regular expression is an email validating regular expression. You only need to alter the information in the function, to create a new validation for another input.

function validEmail(fld) {   
   var error = "";   
   var valid = /^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;    
   if (fld.value == "") {      
      fld.style.borderColor = '#ff0000';       
      document.getElementById('email').style.color = "#ff0000";      
      error = " - You forgot to enter an email address.\n";   
   } else if(valid.test(fld.value)){      
      fld.style.borderColor = '';       
      document.getElementById('email').style.color = "#000000";   
   } else {      
      fld.style.borderColor = '#ff0000';       
      document.getElementById('email').style.color = "#ff0000";      
      error = " - That was not a valid email address.\n";   
   }
return error;
}

Comment Validation Function (Function #4)

Next we will make a comment validation function. (See code below) This function also is exactly like function #2 except with less. Here we removed the regular expression "if else" condition and the variable. This is to only check if the textarea is empty or not.

function validComment(fld) {   
   var error = "";    
   if (fld.value == "") {      
      fld.style.borderColor = '#ff0000';       
      document.getElementById('comment').style.color = "#ff0000";      
      error = " - You forgot your comment.\n";   
   } else{      
      fld.style.borderColor = '';       
      document.getElementById('comment').style.color = "#000000";   
   }
return error;
}

The Whole Code

There you go. A simple easy to edit and add to, JavaScript validation code. Put this into your form and add to and experiment with it to come up with the Client side validation you desire.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JavaScript Form Validation</title>
<script language="JavaScript">
  <!--
  function validateForm(theForm) {
     var errReport = "";
     errReport += validUsername(theForm.username);
     errReport += validEmail(theForm.email); 
     errReport += validComment(theForm.comment);
     if (errReport != "") {
        alert("The was a problem with the following field(s):\n" + errReport);
        return false;
     }
  return true;
  }
  function validUsername(fld) {
     var error = "";
     var valid = /^[a-zA-Z]{5,15}$/;
   
     if (fld.value == "") {
        fld.style.borderColor = '#ff0000'; 
        document.getElementById('username').style.color = "#ff0000";
        error = " - You forgot to enter a username.\n";
     } else if(valid.test(fld.value)){
        fld.style.borderColor = ''; 
        document.getElementById('username').style.color = "#000000";
     } else {
        fld.style.borderColor = '#ff0000'; 
        document.getElementById('username').style.color = "#ff0000";
        error = " - Your User name can only be A-Z and 5-15 characters.\n";
     }
  return error;
  }
  function validEmail(fld) {
     var error = "";
     var valid = /^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
  
     if (fld.value == "") {
        fld.style.borderColor = '#ff0000'; 
        document.getElementById('email').style.color = "#ff0000";
        error = " - You forgot to enter an email address.\n";
     } else if(valid.test(fld.value)){
        fld.style.borderColor = ''; 
        document.getElementById('email').style.color = "#000000";
     } else {
        fld.style.borderColor = '#ff0000'; 
        document.getElementById('email').style.color = "#ff0000";
        error = " - That was not a valid email address.\n";
     }
  return error;
  }
  function validComment(fld) {
     var error = "";
  
     if (fld.value == "") {
        fld.style.borderColor = '#ff0000'; 
        document.getElementById('comment').style.color = "#ff0000";
        error = " - You forgot your comment.\n";
     } else{
        fld.style.borderColor = ''; 
        document.getElementById('comment').style.color = "#000000";
     }
  return error;
  }
  //-->
</script> 
</head>
<body>
<form action="" onsubmit="return validateForm(this)">
  <p><label id="username">User name:</label><br />
  <input name="username" size="15" maxlength="15" type="text" /></p>
  <p><label id="email">Email:</label><br />
  <input name="email" size="35" maxlength="45" type="text" /></p>
  <p><label id="comment">Comment:</label><br />
  <textarea name="comment"></textarea></p>
  <input name="submit" value="Submit" type="submit" />
</form>
</body>
</html>