Ultimate Form Validator | JavaScriptSource

Ultimate Form Validator

JavaScriptSource Staff Oct 27, 2006

General

Handle all of your form validation using one script. This one will verify numeric strings; monitor the status of the CapsLock; verify empty strings, numeric, date, alphabetical, or e-mail fields; confirm passwords; verify the formatting of phone numbers; monitor the minimum/maximum numbers of input characters. Includes language-independent error messages and displays error messages in a div or using an alert box.


Example
First Name:
Last Name:
Email:
Email Preferred:
Phone: (US only)
Birthday:
Gender: Male: Female:
Password:
Re-Enter:
Postal Code
Select one or more of the following:
HTML: CSS: JavaScript:
Comments:
 

Notes

The quickest way of having the right data from the user is validating on the client side. The above mentioned script uses a submit and a real time verification of the inputs.

Two files are necessary to use the script:

  • chkform.js // functions
  • chkform_lang.js // error messages (use different files to use different languages)

Real time verification

Checknumber function is able to watch the pressed keys in real time. After pressing a not numeric character the script deletes the input. Use the following onKeyPress event to activate the script (all on one line):

onKeyPress="javascript:checkNumber(this);"
 onKeyUp="javascript:checkNumber(this);"

Checkcapslock function is able to watch your typing in a password input. If CapsLock was on during your typing then an alert message would appear to warn you. Use the following onKeyPress event to activate the script:

onKeyPress="javascript:checkCapsLock( event )"

On submit verification

Several funkctions are available by this way. After pressing the submit the script verifies the inputs and displays error messages.. Use the following onSubmit event to activate the script in the form element:

onsubmit="return configureValidation(this,3)"

First variable is the form object itself and the second variable should be:

  • 0 // without error messages, just using different css on the wrong fields
  • 1 // error messages appear in a div which has id "errordiv" (you can specify the css for this div)
  • 2 // error messages appear in an alert box
  • 3 // error messages appear in a div and in an alert box at the same time

To set the right rules for the inputs the configureValidation script must be edited in the head of the document:

function configureValidation(f,alerttype){
  f.firstname.isAlphaNumeric = true;
  f.lastname.isAlphaNumeric = true;
  f.email.isEmail = true;
  f.phone.isPhoneNumber = true;
  f.birthday.isDate = true;
  f.postalcode.isEmpty = true;
  f.password1.isLengthBetween = [4,255];
  f.password2.isMatch = f.password1.value;
  f.comments.optional = true;
  var preCheck = (!f.infohtml.checked && !f.infocss.checked
   && !f.infojs.checked) ? errormsg[0] : null;
  return validateForm(f, preCheck, 'required', alerttype);
}

Referring the right input name the following options are available:

  • isEmail = true; // valid email address
  • isAlpha = true; // A-Z a-z characters only
  • isNumeric = true; // 0-9 characters only
  • isAlphaNumeric = true; // A-Z a-z 0-9 characters only
  • isLength = number; // must be exact length
  • isLengthBetween = array; // [lowNumber, highNumber] must be between lowNumber and highNumber
  • isPhoneNumber = true; // valid phone number. See "isPhoneNumber()" comments for the formatting rules
  • isDate = true; // valid date. See "isDate()" comments for the formatting rules
  • isMatch = string; // must match string
  • optional = true; // element will not be validated

There are 3 css types used by the script:

  • checkit: the input has to be filled
  • required: the new css of an input field after an unsuccessful validation
  • errordiv: div contains the error messages

Use the right name of the input for the current language: place an id in the input tag and use a name what you like to show in the error message (all on one line).

input class="checkit" id="Password" type="password"
 name="password1" value="" class="text"

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: chkform.js


CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.


Head

Paste this code into the HEAD section of your HTML document.


Body

Paste this code into the BODY section of your HTML document


Leave a Response

(24 comments)

It seems to work fine for me. You will need to post you question over on [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]the JavaScript forum[/a] for further details. Thanks!

Lee Oct 31, 2008

In order to better help you, you'll need to post your question [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]over on the forums[/a].

Lee Jun 26, 2008

Can anyone please help me run this script?I can't run the script...It doesn't show the errors when I clicked submit...It just clear all the values inputted...

tasha Jun 26, 2008

Excellent script !! But wen i submit the form ..the values of the form do not remain .dey just disappear.. even if error is only in only any one of d input everything in the form disappears ..plss help ..[br /][br /]thank you !!

Anurag Jun 21, 2008

Bengos site![br /]that means: in jargon for "the best" in romanian language

w Jan 31, 2008