Ultimate Form Validator's Information

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"