
<!-- FIVE STEPS TO INSTALL EXTERNAL JS:

  1.  Copy the first code in a new file, save it as validation.js
  2.  Include the .js file in the HEAD of your HTML document
  3.  Define the validation rules for each field in the HEAD section
  4.  Insert the onLoad event handler into your BODY tag
  5.  Add validate() to your submit button, as shown below -->


<!-- STEP ONE: Paste this code into a new file, save as validation.js  -->


// Generic Form Validation
// Jacob Hage (jacob@hage.dk)
var checkObjects	= new Array();
var errors		= "";
var returnVal		= false;
var language		= new Array();
language["header"]	= "The following error(s) occured:"
language["start"]	= "->";
language["field"]	= " Field ";
language["require"]	= " is required";
language["min"]		= " and must consist of at least ";
language["max"]		= " and must not contain more than ";
language["minmax"]	= " and no more than ";
language["chars"]	= " characters";
language["num"]		= " and must contain a number";
language["email"]	= " must contain a valid e-mail address";
// -----------------------------------------------------------------------------
// define - Call this function in the beginning of the page. I.e. onLoad.
// n = name of the input field (Required)
// type= string, num, email (Required)
// min = the value must have at least [min] characters (Optional)
// max = the value must have maximum [max] characters (Optional)
// d = (Optional)
// -----------------------------------------------------------------------------
function define(n, type, HTMLname, min, max, d) {
var p;
var i;
var x;
if (!d) d = document;
if ((p=n.indexOf("?"))>0&&parent.frames.length) {
d = parent.frames[n.substring(p+1)].document;
n = n.substring(0,p);
}
if (!(x = d[n]) && d.all) x = d.all[n];
for (i = 0; !x && i < d.forms.length; i++) {
x = d.forms[i][n];
}
for (i = 0; !x && d.layers && i < d.layers.length; i++) {
x = define(n, type, HTMLname, min, max, d.layers[i].document);
return x;       
}
eval("V_"+n+" = new formResult(x, type, HTMLname, min, max);");
checkObjects[eval(checkObjects.length)] = eval("V_"+n);
}
function formResult(form, type, HTMLname, min, max) {
this.form = form;
this.type = type;
this.HTMLname = HTMLname;
this.min  = min;
this.max  = max;
}
function validate() {
if (checkObjects.length > 0) {
errorObject = "";
for (i = 0; i < checkObjects.length; i++) {
validateObject = new Object();
validateObject.form = checkObjects[i].form;
validateObject.HTMLname = checkObjects[i].HTMLname;
validateObject.val = checkObjects[i].form.value;
validateObject.len = checkObjects[i].form.value.length;
validateObject.min = checkObjects[i].min;
validateObject.max = checkObjects[i].max;
validateObject.type = checkObjects[i].type;
if (validateObject.type == "num" || validateObject.type == "string") {
if ((validateObject.type == "num" && validateObject.len <= 0) || (validateObject.type == "num" && isNaN(validateObject.val))) { errors += language['start'] + language['field'] + validateObject.HTMLname + language['require'] + language['num'] + "\n";
} else if (validateObject.min && validateObject.max && (validateObject.len < validateObject.min || validateObject.len > validateObject.max)) { errors += language['start'] + language['field'] + validateObject.HTMLname + language['require'] + language['min'] + validateObject.min + language['minmax'] + validateObject.max+language['chars'] + "\n";
} else if (validateObject.min && !validateObject.max && (validateObject.len < validateObject.min)) { errors += language['start'] + language['field'] + validateObject.HTMLname + language['require'] + language['min'] + validateObject.min + language['chars'] + "\n";
} else if (validateObject.max && !validateObject.min &&(validateObject.len > validateObject.max)) { errors += language['start'] + language['field'] + validateObject.HTMLname + language['require'] + language['max'] + validateObject.max + language['chars'] + "\n";
} else if (!validateObject.min && !validateObject.max && validateObject.len <= 0) { errors += language['start'] + language['field'] + validateObject.HTMLname + language['require'] + "\n";
   }
} else if(validateObject.type == "email") {
// Checking existense of "@" and ".". 
// Length of must >= 5 and the "." must 
// not directly precede or follow the "@"
if ((validateObject.val.indexOf("@") == -1) || (validateObject.val.charAt(0) == ".") || (validateObject.val.charAt(0) == "@") || (validateObject.len < 6) || (validateObject.val.indexOf(".") == -1) || (validateObject.val.charAt(validateObject.val.indexOf("@")+1) == ".") || (validateObject.val.charAt(validateObject.val.indexOf("@")-1) == ".")) { errors += language['start'] + language['field'] + validateObject.HTMLname + language['email'] + "\n"; }
      }
   }
}
if (errors) {
alert(language["header"].concat("\n" + errors));
errors = "";
returnVal = false;
} else {
returnVal = true;
   }
}


<!-- STEP TWO: Include the .js file in the HEAD of your main document  -->

<HEAD>

<script language="JavaScript" src="validation.js"></script>


<!-- STEP THREE: Define the validation rules for each field  -->
<!-- Rules explained in more detail at author's site: -->
<!-- http://www.hagedesign.dk/scripts/js/validation/ -->


<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Jacob Hage (jacob@hage.dk) -->
<!-- Web Site:  http://www.hagedesign.dk -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function init() {
define('field1', 'string', 'Apple');
define('field2', 'string', 'Peach', 4);
define('field3', 'string', 'Cherry', null, 8);
define('field4', 'string', 'Melon', 4, 8);
define('field5', 'num', 'Banana');
define('field6', 'num', 'Grape', 3);
define('field7', 'num', 'Carot', null, 6);
define('field8', 'num', 'Sugar', 4, 6);
define('field9', 'email', 'Fruit');
}
//  End -->
</script>
</HEAD>

<!-- STEP FOUR: Insert the onLoad event handler into your BODY tag  -->

<BODY OnLoad="init()">

<!-- STEP FIVE: Add validate() to your submit button, as shown below -->

<center>
<table><tr><td>
<form name=testForm>
apple:<br><input type=text name=field1 size=16> Required<br>
peach:<br><input type=text name=field2 size=16> Required - minimum 4 characters<br>
cherry:<br><input type=text name=field3 size=16> Required - maximum 8 characters<br>
melon:<br><input type=text name=field4 size=16> Required - minimum 4 characters - maximum 8 characters<br>
banana:<br><input type=text name=field5 size=16> Required - Must be a numeric character<br>
grape:<br><input type=text name=field6 size=16> Required - Must be a numeric character - minimum 3 digits<br>
carot:<br><input type=text name=field7 size=16> Required - Must be a numeric character - maximum 6 digits<br>
sugar:<br><input type=text name=field8 size=16> Required - Must be a numeric character - minimum 4 digits - maximum 6 digits<br>
fruit:<br><input type=text name=field9 size=16> Required - Valid e-mail<br>
candy:<br><input type=text name=field10 size=16> Not required<br>
<br>
<input type=submit name=submit onClick="validate();return returnVal;" value="Test fields">
</form>
</td></tr></table>
</center>

<p><center>
<font face="arial, helvetica" SIZE="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size:  6.75 KB -->