Validate your HTML form using Javascript

You can validate your HTML form simply applying this static class…
example:

<form
onsubmit="

return
Validate.form(this,
                     {notEmpty:
                                   ['userEmail','reEmail', 'userPassword','rePassword'],
                    equalTo:
                                  ['userPassword,rePassword','userEmail,reEmail'],
                   update:
                                'top-message'})
">...<form>

Here is validation code…

var Validate={

	// set notEmpty as parameter to perform not empty validation
	// set equalTo as parameter to compare 2 fileds validation...
	// you have to setup update parameter so... it will setup the error message
	form: function(form, params) {

		var msg="";

		// validate "notEmpty"
		for(var i=0;  i < params .notEmpty.length; i++) {
			var field=params.notEmpty[i];
			if(this.isEmpty(this.getField(form, field))) {
				msg +="
"+field+" is emptyrn";
				this.errorHighlight(field);

			}
			else {
				this.removeHighlight(field);
			}
		}

		// validate "equalTo"
		for(var i=0; i<params .equalTo.length; i++) {
			var fields=params.equalTo[i];

			var field1 = fields.substring(0,fields.indexOf(","));
			var field2 = fields.substring(fields.indexOf(",")+1,fields.length);

			if(this.getField(form, field1).value !=this.getField(form, field2).value) {
				this.errorHighlight(field1);
				this.errorHighlight(field2);
				msg +="
"+field1+" does not equal to "+field2+"";
			}
		}

		// set message
		if(msg !="") {
			document.getElementById(params.update).innerHTML="
"+msg+"

";
			document.getElementById(params.update).style.textAlign="left";

			// show effect
			EasyAjaxEffectMapping.showEffect(params.update);

			return false;
		}

		return true;
	},
	isEmpty: function(field) {
		if(field.value !=null && field.value.length>0)
			return false;
		else
			return true;
	},
	removeHighlight: function(field) {
		var fObj=document.getElementsByName(field).item(0);

		if(fObj !=null) {
			fObj.style.border="1px";
			fObj.style.borderColor="#0066cc";
			fObj.style.borderStyle="solid";
		}
	},
	errorHighlight: function(field) {
		var fObj=document.getElementsByName(field).item(0);

		if(fObj !=null) {
			fObj.style.border="5px";
			fObj.style.borderColor="red";
			fObj.style.borderStyle="solid";
		}

	},

	getField: function(form, fieldName) {
		var rootDoc=form.getElementsByTagName("input");

		for(var i=0; i< rootdoc .length; i++) {
			if(rootDoc.item(i).name==fieldName) {
				return rootDoc.item(i);
			}
		}
	}
};

Thank you think it will helpful…