By the end of this page you will be able to:
Basic validation (js5_01)
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 :Click here to run js5_01.
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 @ is not in the string (0) or 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.
|Exercise: We can improve the code slightly by adding the background to white ("#FFFFFF") statement into the function fnNameOK(strName)|
|Add the background change before the if statement and remove the change from fnCheckOK()|
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 :Click here to run jsValDate_01.
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.
Comparing two dates can be achieved using the date object:
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)
- 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
Depending on your implementation you may also need to check 1/4/10 (shortened input)
Phone number validation
- 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.
- SmartWebby (2009) DHTML date validation script for dd/mm/yyyy. Retrieved June 10, 2009 from http://www.smartwebby.com/dhtml/
- Refsnes Data (2012) w3Schools. Retrieved from http://www.w3schools.com/js/js_obj_date.asp