Web www.gerd-tentler.de
Version 1.3 (released Jun. 17, 2006) [Download]

Usage

Create your HTML-form as usual and use this button instead of the submit-button:
<input type="button" value="Submit" onClick="checkForm('form', 'definition1', 'definition2', ...)">
form  is either the name of your form or its number
definition  is set for each field you want to validate and has the following syntax:
field name : title : type : minimum length
field name  is the name of your field as set in your form
title  should only be set if you want to view a different field name
type  is one of the following: number, mail, url, date, or nothing (i.e. any text)
minimum length  is the minimum number of characters (text and textarea) or selected options (select); for checkboxes and radio-buttons this should be either 0 or 1

Here's an example:
checkForm('frm1', 'name:::2', 'age::number:1', 'eMail:e-mail:mail:1', 'homepage::url:0',
          'bDay::date(dmy):0');
frm1  is the name of the form you want to validate
name:::2  means, field "name" must contain at least 2 characters of any kind
age::number:1  means, field "age" must be a number and must contain at least 1 character
eMail:e-mail:mail:1  means, field "eMail" will be viewed as "e-mail", must be a mail address and must contain at least 1 character (i.e. must not be empty)
homepage::url:0  means, field "homepage" must be a web address but can be empty
bDay::date(dmy):0  means, field "bDay" must be a date in day-month-year format, but can be empty

When the minimum length of checkboxes or radio-buttons is set to 1, this means that the user has to check that checkbox, or activate one of the radio-buttons. Remember, for checkboxes and radio-buttons minimum length should be either 0 or 1.

When using date fields, you can set a format like "dmy" for day-month-year or "mdy" for month-day-year etc. If you don't specify a format, the default format "dmy" will be used. You don't need to specify a separator in your format (e.g. "d.m.y" or "d/m/y" etc.) - any non-digit character will be accepted. Also the script converts years < 100 to 20xx, e.g. 24.12.06 will become 24.12.2006. Please note that Safari 1 on Mac OS X does only accept dates between Jan. 1, 1901 and Dec. 31, 2037 as valid.

Leading and trailing spaces will automatically be removed from all user input, so if the user types nothing but spaces into a text field, it will remain empty.

To find out how to use this script, it's also a good idea to have a look at the source code of the introduction page. ;-)

Comments