p r e c o m p i l e d

Javascript validation

(the old 1999 version)

I started programming in basic on the commodore 64, but that was indeed very basic. The first real programming I did was in VBA (Visual Basic for Applications) developing visual basic code to enhance excel spreadsheets. I also started experimenting with javascript code when I attended the multimedia course and subsequently working at Two2Tango.
At Two2Tango I developed my "common validation functions". These little javascripts combine into a powerful system to validate almost any HTML-form. I have a common code that goes into the <head> of every page that needs to be validated:


	
1: <script language="JavaScript" src="/~js/Required.js"></script>
2: <script language="JavaScript" src="/~js/Email.js"></script>
4: <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
5:
6: var RequiredList = Array("author","email","2") //required fields
7: var EmailList = Array("email") //email field
8:
9: function Validate()
10: {
11: if (
12: Required(RequiredList) &&
13: Email(EmailList)
14: )
15: {return true}
16: else
17: {return false}
18:
19: }
20: </script>

Lines one and two define what functions are needed to validate this specific page. "Required.js" is a module that is always needed. "Email.js" validates fields as e-mail adresses.
Line 6 and 7 define what fields need to be validated, in this case the Formelements called "author" and "email" are required fields. You'll also notice I have put a field "2" into the list, this is to demonstrate that it is not only possible to validate named fields, but also numbered fields. (element 2 is the third element on the form, because javascript starts enumerating at 0)
Lines 9 - 19 consist of the real validation function, the function checks all required fields and then all e-mail fields. If one of the fields doesn't comply to the validation, a messagebox is shown, and "false" is returned to the function.
Also note that it is possible to have the e-mail field not required, but still validated. In such a case the field is validated only if it contains a value. An e-mail validation does not automatically mean a field is required, which is nice.
In the form part of the page, an OnSubmit() event must be included in the <form> tag like this:


		
1: <form name="form1" method="post" action="AddEntry.asp" 
	onsubmit="return Validate()">
2: <table align="center" width="200px" class="guestbooktable" 
	border="0" cellspacing="0" cellpadding="5">
3: <tr>
4: <td class="guestbookth">Author: </td>
5: <td class="guestbookth">
6: <input type="text" name="author" size="36" maxlength="50">
7: </td>
8: </tr>
9: <tr>
10: <td class="guestbookth">E-mail: </td>
11: <td class="guestbookth">
12: <input type="text" name="email" size="36" maxlength="50">
13: </td>
14: </tr>
15: <tr>
16: <td class="guestbookth">Comment: </td>
17: <td class="guestbookth">
18: <textarea name="comment" cols="30" rows="5"></textarea>
19: </td>
20: </tr>
21: <tr>
22: <td class="guestbookth"> </td>
23: <td class="guestbookth" align="right"><input type="hidden" 
	name="id" value="<%= LastID + 1 %>">
24: <input type="submit" name="submit" value="add"></td>
25: </tr>
26: </table><br>
27: <a href="index.asp"><< back</a>
28: </form>

This part of the code also makes clear how things are validated; "Required" validates all fields really, two of them by name (author and email) and one by elementnumber (comment). "Email" validates the e-mail field (already made a required field by the "Required" function) as a real e-mail address.
If a validation returs "false" the whole function Validate() returns "false" and the form will not submit.

Besides the email and required field validations, I have written a number of validation functions, you may use them at will, but please mention me in the code as the original author. Here is a list of the rest of the validation-functions I wrote:

File	Contains function(s)	what it does
Required.js	Required(listname)	validates a list of formfields, returns false if one is empty
	StringEmpty()	checks if one value is empty or not, this subfunction is required for a lot of the validation-functions, that is why Required.js is obligatory for the rest of the validation-functions to work.
Email.js	Email(listname)	validates a list of formfields, returns false if one is not a valid e-mail address
Telephonenumber.js	Telephonenumber(listname)	validates a list of formfields, returns false if one is not a valid telephonenumber. Accepts "-" , "(" , ")" , "+" and " " as valid characters
	isTelnumber(number)	checks if one value is a telephonenumber or not.
Range.js	Range(listname,rangestart,rangeend)	validates a list of formfields, returns false if one is not in the specified numerical range.
Numeric.js	Numeric(listname)	validates a list of formfields, returns false if one is not a valid number.
	isNumber(number)	checks if one value is a number or not.
Datepast.js	Datepast(listname)	validates a list of formfields each date must consist of three inputs (dd-mm-yyyy), returns false if a set of three is not a valid date in the past. Also completes dayvalues, monthvalues and yearvalues. For example if you put '5' in a dayfield, the script will compleet it to '05' it will also complete two-digit yearvalues to 4-digit values. To accomplish this, make the dateinput like this: <input type="text" name="DateDD" value="" size="2" maxlength="2" onChange="ChangeDay(this)" onFocus="this.style.border= 'thin solid red'" onBlur="this.style.border= 'thin inset'"> -<input type="text" name="DateMM" value="" size="2" maxlength="2" onChange="ChangeMonth(this)" onFocus="this.style.border= 'thin solid red'" onBlur="this.style.border= 'thin inset'"> -<input type="text" name="DateYYYY" value="" size="4" maxlength="4" onChange="ChangeYear(this)" onFocus="this.style.border= 'thin solid red'" onBlur="this.style.border= 'thin inset'">
	Changeday/month/year(object)	three seperate functions to complete day, month and year-values
Datefuture.js	Datefuture(listname)	validates a list of formfields each date must consist of three inputs (dd-mm-yyyy), returns false if a set of three is not a valid date in the future. Also completes dayvalues, monthvalues and yearvalues. For example if you put '5' in a dayfield, the script will compleet it to '05' it will also complete two-digit yearvalues to 4-digit values. To accomplish this, make the dateinput like this: <input type="text" name="DateDD" value="" size="2" maxlength="2" onChange="ChangeDay(this)" onFocus="this.style.border= 'thin solid red'" onBlur="this.style.border= 'thin inset'"> -<input type="text" name="DateMM" value="" size="2" maxlength="2" onChange="ChangeMonth(this)" onFocus="this.style.border= 'thin solid red'" onBlur="this.style.border= 'thin inset'"> -<input type="text" name="DateYYYY" value="" size="4" maxlength="4" onChange="ChangeYear(this)" onFocus="this.style.border= 'thin solid red'" onBlur="this.style.border= 'thin inset'">
	Changeday/month/year(object)	three seperate functions to complete day, month and year-values
ChangeClass.js	ChangeClass(ClassName)	To be used in an onChange() or onBlur() event, changes the class to the specified CSS class if the event is triggered

I have put all functions in a downloadable .ZIP file, there is also an explanation of the functions in the .ZIP file, but that is in dutch only.

precompiled.com

Javascript validation

(the old 1999 version)