Generic JavaScript validator 1.0 (beta) [JavaScript validation through DOM ]

1. What is it ?

Generic JavaScript validator 1.0 (beta) is a simple but powerful cross-browser JavaScript that combines DOM and regulars expressions for the client-side validation of forms. It can validate any number of form on HTML documents. It also supports user defined JavaScript functions.

2. Include .js file
Inside <head> section of the html with the form inside you insert these lines...

3. Attribute List

Attribute	Allowed values	Behavior
required	[yes \| no]	if set to "yes" this field can't be left empty (you must insert at least one char). If set to "no" the field becomes optional, but if a value is inserted, it must match with a pattern.
authtype	_specialchars	No Special characters allowed, but numbers are allowed. Regex : /^[a-zA-Z0-9\ ]+$/
	_specialcharsandnumbers	No Special characters and numbers are allowed. Regex : /^[a-zA-Z\ ]+$/
	_digits	Only decimal values are allowed. Regex : /^[\d]+$/
	_email	Checks for valid with standard Email regular expression. Regex : /^[A-Za-z]+(\.[\w]+)*@([\w\-]+\.)+ ([a-z]{2}\|com\|net\|edu\|org\|gov\|mil\|int\|biz\|pro \|info\|arpa\|aero\|coop\|name\|museum\|mobi\|tv)$/
	_url	Checks for valid website address. Website address like http://www.www.www or www.www.www are allowed. Regex : /^(www.\|[a-zA-Z].)[a-zA-Z0-9\-\.] +\.(com\|edu\|gov\|mil\|net\|org\|biz\|info\|name \|museum\|us\|ca\|uk\|tv\|mobi)(\:[0-9]+)* (\/($\|[a-zA-Z0-9\.\,\;\?\'\\\+&%\$#\=~_\-]+))$/ Regex :* /^(((http(s?))\|(ftp))\:\/\/)?(www.\| [a-zA-Z].)[a-zA-Z0-9\-\.]+\.(com\|edu\|gov\|mil\| net\|org\|biz\|info\|name\|museum\|us\|ca\|uk\|tv \|mobi)(\:[0-9]+)(\/($\|[a-zA-Z0-9\. \,\;\?\'\\\+&%\$#\=~_\-]+))$/
	_date	Date format DD-MM-YYYY, DD/MM/YYYY and DD.MM.YYYY are allowed. Also checks for leap year and invalid months as well as days. Regex : /^[\d]{2}[\-\|\/\.][\d]{2}[\-\|\/\.][\d]{4}$/
	_phonenumber	Checks for Digits only. Regex : /^[\d]+$/
	_mobilenumber	Match for mobile number pattern (+xx)xxxxxxxxxx or xxxxxxxxxx Regex 1 : /[$][\+][\d]{2}[$][\d]{10}/ Regex 2 : /^[\d]{10}$/
	_usphonenumber	Match for standard US phone number pattern (xxx)xxx-xxxx Regex : /[$][\d]{3}[$][\ ][\d]{3}[\-][\d]{4}/
	_zip	Checks for Digits only (must be of 5 or 6 digits length). Its also allows U.K. postcode Regex (Default) : /^[\d]{5,6}$/ Regex (US) : /^[0-9]{5}\-[0-9]{4}$/ Regex (UK) : /^[A-Za-z]{1,2}[0-9A-Za-z]{1,2}[ ]?[0-9]{0,1}[A-Za-z]{2}$/ Regex (BE) : /^[1-9]{1}[0-9]{3}$/ Regex (BR) : /^\d{5}-\d{3}$\|^\d{8}$/ Regex (CA) : /^[a-zA-Z][0-9][a-zA-Z]\s?[0-9][a-zA-Z][0-9]$/ Regex (DU) : /^[0-9]{4}\s{0,1}[a-zA-Z]{2}$/ Regex (India) : /^[\d]{6}$/
	_username	Checks for username pattern. No special characters allowed at starting of username. (.-_) dot,dash,underscore may come in between a username. End character of username may contain alpha-numeric values. Regex : /^[a-zA-Z]+[a-zA-Z0-9\.\_]*[a-zA-Z0-9]+$/
	_flname	Checks for First/Last Name pattern. No special characters allowed in First/Last name. Regex : /^[a-zA-Z]+[\']*[a-zA-Z]+$/
	_currency	Checks for decimal or float values. Regex : /^[\d]+[\d\.]*[\d]+$/ or /^[\d]+$/
	_custom	Any pattern, which you are going to specify in to pattern attribute.
errormsg	Error message	Specify, your own error message alert.
pattern	Your own Regular Expression or Pattern for comparison with user input.	Specify, your own pattern to be validate with an input field.

4. Some Examples

Zip/Pincode Validation
Indian Postal code(395001) - 6 digits allowed.

Pincode :

Show Code

<form>
Pincode : <input required="yes" country="IN" authtype="_zip" type="text">
Indian Postal code(395001) allowed.
<input value="Submit" type="submit">
</form>

Hide Code

Date Validation
DD-MM-YYYY or DD/MM/YYYY or DD.MM.YYYY

Please enter the date :

Show Code

<FORM>
Please enter the date : <INPUT authtype="_date" required="yes">
DD-MM-YYYY or DD/MM/YYYY or DD.MM.YYYY <BR>
<INPUT type=submit value=Submit>
</FORM>

Hide Code

Custom Pattern
Allowd only Jpg files

Only Jpg files :

Show Code

<form>
Only Jpg files : <input errormsg="Only jpg file allowed." required="yes"
authtype="_custom" pattern="jpg$" type="file" >
<input value="Submit" type="submit">
</form>

Hide Code

Click here to browse example page.

5. Your own functions
Amount must be greater or equal to 100.

Your own function

Enter amount :

Show Code

<script language="JavaScript">
function checkamount()
{
	if(document.f2.amount.value!="")
		{
		var regex = /^[\d]+$/;
		if(!regex.test(fieldValue)){
		alert("Only decimal values allowed.");
		return false;
		}
	else
		{
		if(document.f2.amount.value < 100){
		alert("Amount must be greater or equal to 100.");
		document.f2.amount.focus();
		return false; // must return false/true for execution of your
		}
return true; // must return false/true for execution of your
}
</script>



Form Code:-
<form name="f2" method="post" action="view.php">
<br>
Enter amount : $ <input name="amount" authtype="checkamount" 
required="yes" size="5" type="text">
  <input value="Submit" type="submit">
<br>
<font color="#cccccc">
Amount must be greater or equal to 100.</font>
</form>

Hide Code

6. Adding your own functions.
This validator is purely based on regular expression (i.e. pattern) matching.
to add your own functions in validate.js, please follow the coding structure as follow...

7. Leave your feedback.

Please drop your comments/suggestions/bugs here...

Your name :
Your Email :
Comments :