JavaScript:Form validation

Basic validation (js5_01)
js5_01.htm

js5_01.js

Note: there is an example of some debugging code in fnEmailOK (between /* and */). If you remove the comment tags, and there is an error in the email an alert box will appear. (Obviously this code is commented out or removed in the production/live version).

Example js5_01

eMail validation
js5_01a.js

If any of the following occur the email returns false ( || = or )
 * strEmail=="" nothing is entered
 * !isNaN(strEmail) Not (NOT a (!) Null) - actually says is it null
 * Email.length)<5 : length <= 4 char
 * fnNumchar(strEmail," ")>0 : If there is a space in the string
 * fnNumchar(strEmail,"@")!=1) : If an @ is in the first position
 * fnNumchar(strEmail,".")==0 : If a . is not in the string

Note you could rewrite the function using the IndexOf function

Validation using a common function (js5_FormVal_TxtNotEmpty.html)
A little more sophisticated, this code uses a form containing first and last name, checks to see if any data has been entered. If either field is blank it will change the background colour and produce a message on the form using getElementById.

Example :.

Form events (js5_02)


Example js5_02

mouseover (js5_03)
Notes:
 * When you mouse over
 * get focus the "edit" cursor appears at the start of the text box
 * lose focus the "edit" cursor disappears from the text box
 * If you mouse over select the text is highlighted and get/lose focus do not work. Click away from text box to deactivate the selection.

Example js5_03

Date validation
Dates can be validated by parsing the date string (or using regular expressions). An example of date validation using string methods can be found at SmartWebby (2009)

Example jsValDate_01.htm

To compare dates it is easiest to compare the international date format yyyymmdd e.g. 20100602 is greater than 20100131. (in the New Zealand date format ddmmyyyy this is not true as 31012010 > 02062010). To simplify user input I suggest you put the format you want onto the form. If you want to use the country specific format (e.g. NZ dd/mm/yyyy) use string manipulation to change to yyyymmdd then compare.

A very clever way to test if a date is valid, is to ask JavaScript to create a date from your values then test them

Comparing two dates can be achieved using the date object:

w3Schools

Some test data
The following list shows some dates you can use to test your date routine. (I am using a dd/mm/yyyy format) Depending on your implementation you may also need to check 1/4/10 (shortened input)
 * 01/01/2010, 31/12/2010 - valid (always check it works before testing for errors :) )
 * dd (day invalid) 99/01/2010, a1/01/2010, 30/02/2010 (Feb max 29), 31/09/2010 (Sep max 30)
 * mm (month invalid) 01/99/2010, 01/aa/2010
 * yyyy (year invalid) 01/01/10

Phone number validation

 * You will find many examples of JavaScript where phone numbers are validated using a mask (e.g. (##) ###-#### ). Personally, I think mask based phone numbers create more problems than they solve. E.g. 111 (or 911) are valid phone numbers, 4 digit mobile numbers exist, as do a wide variety of freephone (0800) 123-123 and cell phone numbers.
 * For phone numbers I think it is adequate to check for numerics, space, brackets and a dash. You may want to consider alphabetic numbers e.g. 0800 CALL ME  depending on your application.

Adding a form (using connected media)
It is also possible to add a form using public server based systems such as Google docs and email me form. This has the advantage of getting around the local email client requirement, however, as customer data is routed via someone else's server think about the security of the data.

Refer to Adding a form for more details.