Form Guard

by Xin Yang

 

Form Guard is a collection of the following JS form checking functions:


updateed on 2005-09-06:
 
URL: The goodURL(field, msg) call now accepts the character of "=".


added on 2005-02-28:
 
EMails:   ... goodMultiEMails(field, msg)
  checks for email addresses separated by commas or semi-colons


added on 2004-12-03:
 
Password:  
Re-Enter:   ... goodPasswords(field1, field2, msg1, msg2)
 

This call takes two password fields, checks for non-blank and compares them.

It alerts msg1 if a password field is blank, and alerts msg2 if two passwords aren't equal to each other.


Password:  
Re-Enter:   ... goodPasswordsLen(field1, field2, n, m, msg1, msg2, msg3)
 

This call is similar to goodPasswords(), and it checks for password length as well.

It alerts msg1 if a password field is blank, alerts msg2 if two passwords aren't equal to each other, and alerts msg3 if the password length doesn't fall into [n, m].


EMail:  
Re-Enter:   ... goodEMails(field1, field2, msg1, msg2)
 

This call takes two EMail fields, validates and compares them.

It alerts msg1 if an EMail field is blank, and alerts msg2 if two EMails aren't equal to each other.



added on 2004-09-01:
 
 

nonBlank() now also checks for radio/radio group, checkbox/checkbox group, select-list and file.

  ... single radio
       ... radio group
  ... single checkbox
       ... checkbox group
... select-list
... file upload
 
URL:   ... goodURL(field, msg)
  The goodURL(field, msg) call checks whether the field value starts with "http://" or "https://", followed by a domain name in xxx.xxx.xxx format, and the web path only contains characters of "/", "%", "?", "+", "#", "&", ".", [a-z], [A-Z], [0-9], "_" and "-".



added on 2004-07-08:
 
 

notSubmitted(msg)
... this call sets a global variable and returns true when the form is first time submitted, and if the form is being submitted again, it alerts the message and returns false.

To use it, place it as the last checking call (place after the noErrors() call if you use one-alert option).



updated on 2004-07-07:
 
 

The one-alert option introduced on 2004-07-06 would show the same error message twice for a checking function if internally the function calls another checking function. This bug is now fixed.

To take the one-alert option, you should always use 1 as the extra parameter.



added on 2004-07-06:
 

Usually the first field that fails to pass the checking will stop the rest of checkings.

The Check button on the left side checks both VISA and MasterCard, but if VISA doesn't pass the checking, MasterCard won't be checked. The checking calls are like:

<form ... onsubmit="return goodVisa(field, msg) && goodMasterCard(field, msg)">


You can now check all the fields and consolidate all the error messages into one alert. To do so, call the validating functions with one extra parameter and add noErrors() as the last call, for example:

<form ... onsubmit="return goodVisa(field, msg, 1) && goodMasterCard(field, msg, 1) && noErrors()">

Try the Check button on the left side and it checks both VISA and MasterCard but only shows one alert.

 
  Note: The core of the following credit card checking calls is taken from Netscape LivePayment samples codes.

Credit Card:   ... goodCreditCard(field, msg)
  the goodCreditCard(field, msg) call checks whether the given credit card number passes the Luhn Mod-10 test or not.

VISA:   ... goodVisa(field, msg)

MasterCard:   ... goodMasterCard(field, msg)

AMEX:   ... goodAmericanExpress(field, msg)

Diner's Club:   ... goodDinersClub(field, msg)

Carte Blanche:   ... goodCarteBlanche(field, msg)

Discover:   ... goodDiscover(field, msg)

enRoute:   ... goodEnRoute(field, msg)

JCB:   ... goodJCB(field, msg)

 

added on 2004-03-26:
 
Search:   ... noBadWords(field, strict, word-list, msg)
  the noBadWords(field, strict, word-list, msg) call screens field.value for bad words (case insensitive).

the strict parameter can be true so that say "deletesomething" will be caught by key word "delete", or false so that only "delete something" will be caught.
 

added on 2004-03-25:
 
Color:   ... goodHexColor(field, msg)
  the goodHexColor(field, msg) call checks field.value against the format of #xxxxxx, x could be 0-9, a-f or A-F.

Non Blank:   ... nonBlank(field, msg)
  the nonBlank(field, msg) call checks whether field.value contains any non-white-space character.

Radio & Input: US$   ... goodRadioedFields(form, "radio-group-name", reg-exp, msg-list, msg)
  CA$   
  the goodRadioedFields(form, "radio-group-name", reg-exp, msg-list, msg) call uses the reg-exp to check the form field whose name is the value of a checked radio button in the radio-group.

for example, if you have the following radio group and input fields:

<form name="myForm">
<input type="radio" name="currency" value="usd">US$ <input type="text" name="usd" value="">
<input type="radio" name="currency" value="cad">CA$ <input type="text" name="cad" value="">
...

you can use the following call to check the form field specified by the radio button:

goodRadioedFields(document.forms.myForm, "currency", /^\d{1,5}(\.\d{1,2})?$/, ["Please input the US$ amount", "Please input the CA$ amount"], "Please specify a currency first")

the /^\d{1,5}(\.\d{1,2})?$/ is a JS regular expression to validate some floating numbers. The Form Guard script defines some frequently used regular expression in JS variables, which can be used as the reg-exp parameter in the goodRadioedFields() call, such as:
- reNonBlank ... /[\S]/
- reHexColor ... /^#[0-9a-fA-F]{6}$/
- reInt ... /^\d+$/
- reSignedInt ... /^(\+|-)?\d+$/
- reFloat ... /^\d+(\.\d+)?$/
- reSignedFloat ... /^(\+|-)?\d+(\.\d+)?$/
- reChar ... /^[\w\-]+$/

Radio & Input: Str:   ... goodRadioedFields2(form, "radio-group-name", reg-exp-list, msg-list, msg)
  Int:   
  the goodRadioedFields2(form, "radio-group-name", reg-exp-list, msg-list, msg) call is similar to goodRadioedFields(), except that it takes a list of regular expressions for each form filed. It could be used like this:

goodRadioedFields2(document.forms.myForm, "str_int", [reNonBlank, reInt], ["Please input a string", "Please input an integer"], "Please select the string or interger first ")
 

first release:
 
EMail:   ... goodEMail(field, msg)
  a good email address consists of the name portion (xxx, xx-xx, xx.xx), @, and the domain portion (xx-xx.xxx.xx)

the goodEMail(field, msg) call returns ture is field.value is a valid email address, otherwise, alerts the msg, returns false and highlights the form field;

Username:   ... goodChar(field, msg)
  the goodChar(field, msg) call accepts alphanumeric characters including the underscore and dash, returns true if field.value is good, or alerts the msg, returns false and highlights the form field

Username:
(min/max length)
  ... goodCharLen(n, m, field, msg)
  the goodCharLen(n, m, field, msg) call accepts alphanumeric characters including the underscore and dash, and the number of chars should fall into [n,m]

Numbers:   ... goodInt(field, msg), goodSignedInt(field, msg)
  the goodInt(field, msg) call accepts 0-9 only, goodSignedInt(field, msg) accepts a leading +/- as well.

Numbers:
(max length)
  ... goodIntLen(n, field, msg), goodSignedIntLen(n, field, msg)
  the goodIntLen(n, field, msg) call accepts 0-9 only, and up to n digits, goodSignedIntLen(n, field, msg) accepts a leading +/- as well (the +/- sign is not counted as one of the n digits).

Numbers:
(exact length)
  ... goodIntLen2(n, field, msg), goodSignedIntLen2(n, field, msg)
  the goodIntLen2(n, field, msg) call accepts 0-9 only, and exactly n digits, goodSignedIntLen2(n, field, msg) accepts a leading +/- as well (the +/- sign is not counted as one of the n digits).

Floating Number:    ... goodFloat(field, msg), goodSignedFloat(field, msg)
  the goodFloat(field, msg) call accepts numbers in format of xxx.xxx or xxx, goodSignedFloat(field, msg) accepts a leading +/- as well.

Floating Number: 
(max length)
  ... goodFloatLen(n, m, field, msg), goodSignedFloatLen(n, m, field, msg)
  the goodFloatLen(n, m, field, msg) call accepts numbers in format of xxx.yyy or xxx, xxx could have up to n digits, yyy if presents could have up to m digits, goodSignedFloatLen(n, m, field, msg) accepts a leading +/- as well (the +/- sign is not counted as one of the n digits).

Floating Number: 
(exact length)
  ... goodFloatLen2(n, m, field, msg), goodSignedFloatLen2(n, m, field, msg)
  the goodFloatLen2(n, m, field, msg) call accepts numbers in format of xxx.yyy, xxx should have exactly n digits, yyy should have exactly m digits, goodSignedFloatLen2(n, m, field, msg) accepts a leading +/- as well (the +/- sign is not counted as one of the n digits).

Numbers:   ... rangeInt(field, r1, r2, msg), rangeSignedInt(field, r1, r2, msg)
  rangeInt(field, r1, r2, msg) calls goodInt(field, msg) first, if good then checks whether the value falls into [r1, r2]. likewise, rangeSignedInt(field, r1, r2, msg) calls goodSignedInt(field, msg).

Numbers:
(max length)
  ... rangeIntLen(n, field, r1, r2, msg), rangeSignedIntLen(n, field, r1, r2, msg)
  rangeIntLen(n, field, r1, r2, msg) calls goodIntLen(n, field, msg) first, if good then checks whether the value falls into [r1, r2]

Numbers:
(exact length)
  ... rangeIntLen2(n, field, r1, r2, msg), rangeSignedIntLen2(n, field, r1, r2, msg)
  rangeIntLen2(n, field, r1, r2, msg) calls goodIntLen2(n, field, msg) first, if good then checks whether the value falls into [r1, r2]

Floating Number:    ... rangeFloat(field, r1, r2, msg), rangeSignedFloat(field, r1, r2, msg)
  rangeFloat(field, r1, r2, msg) calls goodFloat(field, msg) first, if good then checks whether the value falls into [r1, r2]

Floating Number: 
(max length)
  ... rangeFloatLen(n, m, field, r1, r2, msg), rangeSignedFloatLen(n, m, field, r1, r2, msg)
  rangeFloatLen(n, m, field, r1, r2, msg) calls goodFloatLen(n, m, field, msg) first, if good then checks whether the value falls into [r1, r2]

Floating Number: 
(exact length)
  ... rangeFloatLen2(n, m, field, r1, r2, msg), rangeSignedFloatLen2(n, m, field, r1, r2, msg)
  rangeFloatLen2(n, m, field, r1, r2, msg) calls goodFloatLen2(n, m, field, msg) first, if good then checks whether the value falls into [r1, r2]

Date:   ... goodDate(format, field, msg)
  the goodDate(format, field, msg) call checks field.value against the format, the format should include dd for day, mm for month and yyyy for year, it can have any other chars as separators, such as dd/mm/yyyy or mm-dd-yyyy

Date:   ... rangeDate(format, field, r1, r2, msg)
  rangeDate(format, field, r1, r2, msg) calls goodDate(format, field, msg) first, if good then checks whether the field.value falls into [r1, r2].

r1/r2 could be either in the specified date format, or "0" for today, "-1" for yesterday, "-n" for n days before , "1" for tomorrow and "n" for n days later.

Date Range: ... goodDateRange(format, field1, field2, msg)
    ... goodDateRange2(format, field1, field2, msg)
  goodDateRange(format, field1, field2, msg) calls goodDate(format, field, msg) first to validate the given two dates, if good then checks whether the first date is earlier than or equal to the second date.

goodDateRange2(format, field1, field2, msg) does the same thing except that the first date should be earlier than the second date.

IP:   ... goodIP(field, msg)
  the goodIP(field, msg) call checks field.value against the format of xxx.xxx.xxx.xxx, xxx could be 1-3 digits

Phone:   ... goodPhone(format, field, msg)
  the goodPhone(format, field, msg) call checks field.value against the format, the format should use "d" for numbers only, or "w" for numbers or alphabetic characters, it can have any other chars as separators. for example "(ddd) ddd-dddd" would accept phone numbers like (604) 123-1234, and "(ddd) ddd-wwww" would accept phone numbers like (604) 123-4663 and (604) 123-good.

 

Installation:
 

To install, right click to save this form.js, then include it into your page, inside the HEAD section:

<head>
<script languange="javascript" src="form.js"></script>
</head>

To check the fields, since all the functions would alert the error message if the given form field doesn't pass the checking, you can set up an onsubmit event in your form, for example:

<form action="..." method="..." onsubmit="return goodIntLen2(10, this.numberField, '10 digits needed') && goodDate('mm-dd-yyyy', this.dateField, 'Bad Date') && ...">