Basic Instant Form Validation

To continue my series of form validation and presentation posts, I have built a simple form validation script that does not require a library to use, which makes it very small, even uncompressed, totaling only 7kb. This validation script currently handles the following types of fields:

• Required Field: user must enter a value
• Email Address: user must enter an email address
• Digits-only: user must enter only digits (includes optional phone number formatting (US only, for now): if user enters a phone number, the script automatically converts it to “(555) 555-5555″)
• Minimum/Maximum Length: user input must meet a minimum length and cannot exceed a maximum length

The script relies on class names assigned to each input field such as “required” “isemail”  “minlength:4″ or “phone” to apply validation rules.

To get started

Check out the demo first. Then, download the source code.

In validation.js, at the very end of the file, you will see this code:

addEvent(window, 'load', function(){
  var registration = document.getElementById('registration');
  validate.listen(registration);
  registration.onsubmit = function(){
    return validate.init(this);
  }
});

You will want to change the name of the form here. Basically replace the word ‘registration’ with the name of your form. Or if you want to add this to every form throughout your site, try this instead:

addEvent(window, 'load', function(){
  if(document.forms){
    for(i=0;i<document.forms.length;i++){
      validate.listen(document.forms[i]);
      document.forms[i].onsubmit = function(){
        return validate.init(this);
      }
    }
  }
});

Preparing your form for validation

There are a couple things you will want to do for all fields you intend to check before actually adding validation classes to them:

1. Make sure the field has a title attribute. This is used for the error messaging. For example, if the field is “First Name”, your title attribute should be title="First Name"
in order to give the user a clearer message as to what they need to do next.
2. Assign a maxlength, if the field requires one. The maxlength attribute will be used in any cases where you are validating a field that requires a value with a minimum length. The error message will automatically tell the user the appropriate range of characters the input field accepts and if the minimum and maximum character lengths are the same, it will tell the user the exact number of characters required to fix the error.

Setting up fields for validation

Like I mentioned at the beginning of this post, these are the current validation methods:

• Required Field
• Email Address
• Digits-only (with optional phone number formatting)
• Minimum/Maximum Length

Required fields
To add required field validation, simply add to any one of your inputs or textareas (doesn’t work for checkboxes, radio buttons, or selects).

Digit-only fields
To add validation to fields that only accept digits, simply add class="digits" to your input field. This will prevent the user from entering any other type of character.

Optional US phone number formatting is available by changing your class to
<input type="text" name="phone" title="Phone Number" maxlength="10" class="digits phone minlength:10">
This will essentially take a 10 digit US phone number with no formatting and convert it to this: (555) 555-5555.

Minimum/Maximum length fields
To add validation for minimum/maximum length fields, simple add a class name of minlength followed by a colon followed by a number, which represents the minimum length allowed for this specific field. If you need to add a maximum length, as I mentioned earlier, you will want to add the standard attribute maxlength for that, for example:
<input type="text" name="firstname" title="First Name" maxlength="25" class="minlength:2">

Mix and match

You can use multiple classes to add separate validation rules to an input field. For example, if you have a field that requires the user to enter a number between 8 and 10 characters, you would add class="digits minlength:8" and maxlength="10" as a standard attribute, resulting in the following:
<input type="text" name="idnumber" title="ID Number" maxlength="10" class="digits minlength:8">

Use and enjoy

Please use this script and let me know how it works out for you and if you encounter any bugs. I will be adding more validation and formatting to this in the future, for things like addresses, ZIP codes, passwords, phone numbers for different countries, etc.

Here is the demo . Download the source code.