Checking Your Work: Validating Input — The Cool Stuff

Introduction to Validation

In the first part of this series Checking Your Work: Validating Input, we built the basic scripts required to validate some of our example form elements using JavaScript. We wired the JavaScript to our form, created a method to display a message box and inline text when a validation error occurs, and made sure that all of our required elements had been completed. In this installment we’ll move on to the cool stuff like nested validation and making sure input from the user is the correct type and is formatted properly.

Validating Data Type

One of the most common validation checks is the simple check for data type. Validating by data type involves checking the user’s input to make sure it is an integer number, a monetary amount, or some other type comparison. You will find this type of comparison especially helpful when it comes to verifying numbers and validating character strings that should not have any numbers, such as names, for example. Below are scripts that apply to our form example in our first article where we check to make sure the name input is all characters and our number of years is a whole number. I have also included another common script that is outside the scope of our example which you will find useful for checking input to make sure it is formatted properly.

The first thing we will need to do is to create some common variables to hold our expressions that we will use to validate against. Don’t worry if the expressions don’t make any sense to you. Creating regular expressions is an art form all its own. Whenever possible you should try to find an expression that someone else has already created and tested. Writing one from scratch can be both time consuming and tedious, especially for the novice.

// Common validation expressions

      var noNumbersExpression = /^[a-zA-Z]+$/;
      var numbersOnlyExpression = /^[0-9]+$/;
      var moneyExpression = /^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{2})?$/;

The following scripts will validate our first name, last name and years on the internet input.

// Validate first name is all letters

      if (document.getElementById(‘TextFirstName’).value.match(noNumbersExpression))
      {
          // Valid – do nothing
      }
      else
      {
          validationMessage = validationMessage + ‘  – First name must contain letters onlyrn’;
          valid = false;
      }
// Validate first name is all letters
      if (document.getElementById(‘TextLastName’).value.match(noNumbersExpression))
      {
          // Valid – do nothing
      }
      else
      {
          validationMessage = validationMessage + ‘  – Last name must contain letters onlyrn’;
          valid = false;
      }
// Validate years is a whole number
      if (document.getElementById(‘TextInternetYears’).value.match(numbersOnlyExpression))
      {
          // Valid – do nothing
      }
      else
      {
          validationMessage = validationMessage + ‘  – Years using internet must be a whole numberrn’;
          valid = false;
}

This last script doesn’t apply to our example form but illustrates the basic concepts for validating money input.

// Validate for money

      if (document.getElementById(‘someElement’).value.match(moneyExpression))
      {
          // Valid – do nothing
      }
      else
      {
          validationMessage = validationMessage + ‘  – Input not a valid money amountrn’;
          valid = false;
      }

Properly Formatted Input

The next type of validation we will cover is making sure that our input conforms to a specific format. In our example we will specifically be validating for an email address and a U.S. telephone number. Some other common format validations that you may run across could be zip codes/postal codes, social security numbers, international phone numbers, etc. Again, I encourage you to search the internet for expressions before attempting to create your own. At the very least you should be able to find an expression that you can adapt to your specific needs.

The following expressions will allow us to validate our email and telephone input. We will add the expressions to the Common validation expressions section in the preceding example.

var emailExpression = /^[w-.+]+@[a-zA-Z0-9.-]+.[a-zA-z0-9]{2,4}$/;

      var telephoneExpression = /^(((d{3}) ?)|(d{3}-))?d{3}-d{4}$/;
Now for the validation script using our new expressions:
// Validate email formatted properly
      if (document.getElementById(‘TextTelephone’).value.match(telephoneExpression))
      {
          // Valid – do nothing
      }
      else
      {
          validationMessage = validationMessage + ‘  – Your telephone number appears to be invalidrn’;
          valid = false;
      }
// Validate email formatted properly
      if (document.getElementById(‘TextEmail’).value.match(emailExpression))
      {
          // Valid – do nothing
      }
      else
      {
          validationMessage = validationMessage + ‘  – Your email address appears invalidrn’;
          valid = false;
      }

Custom Validation

As with any development project, you are always going to have those special situations that require a completely custom solution. In our example we have created a slightly complex scenario with the favorite websites checkboxes that will require us to come up with a two-step custom validation. First, we want to make sure that at least one checkbox has been checked. If there is at least one checked we want to then make sure that the user didn’t make selections that make no sense, i.e. select None and any other website option. Here is the script to handle our situation:

// Validate at least one favorite website checkbox is checked

      if (
          document.getElementById(‘CheckboxHtmlGoodies’).checked == false &&
          document.getElementById(‘CheckboxWDVL’).checked == false &&
          document.getElementById(‘CheckboxInternet’).checked == false &&
          document.getElementById(‘CheckboxJavaScript’).checked == false &&
          document.getElementById(‘CheckboxNone’).checked == false
          )
      {
          validationMessage = validationMessage + ‘  – Please select at least one favorite website optionrn’;
          valid = false;
      }
      else
      {
          // Passed initial validation – now make sure None is not selected with other options
          if (
              document.getElementById(‘CheckboxNone’).checked == true &&
                  (
                  document.getElementById(‘CheckboxHtmlGoodies’).checked == true ||
                  document.getElementById(‘CheckboxWDVL’).checked == true ||
                  document.getElementById(‘CheckboxInternet’).checked == true ||
                  document.getElementById(‘CheckboxJavaScript’).checked == true
                  )
              )
          {
          validationMessage = validationMessage + ‘  – None should not be selected with other favorite website selectionsrn’;
          valid = false;
          }
      }