A JavaScript reusable form class

form-validation-advanced.js

/* See blog post for details: http://www.suburban-glory.com/blog?page=173 */

;(function(window, document, undefined) {

    // for browsers without navite bind support
	if (!Function.prototype.bind) {
		Function.prototype.bind = function(oThis) {
			if (typeof this !== "function") {
				// closest thing possible to the ECMAScript 5 internal IsCallable function
				throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
			}

			var aArgs = Array.prototype.slice.call(arguments, 1),
				fToBind = this,
				fNOP = function() {},
				fBound = function() {
					return fToBind.apply(this instanceof fNOP && oThis ? this : oThis, aArgs.concat(Array.prototype.slice.call(arguments)));
				};

			fNOP.prototype = this.prototype;
			fBound.prototype = new fNOP();

			return fBound;
		};
	}

	// for browsers without native indexOf support on arrays
	if (!Array.prototype.indexOf) {
		Array.prototype.indexOf = function(searchElement /*, fromIndex */ ) {
			"use strict";
			if (this == null) {
				throw new TypeError();
			}
			var t = Object(this);
			var len = t.length >>> 0;
			if (len === 0) {
				return -1;
			}
			var n = 0;
			if (arguments.length > 1) {
				n = Number(arguments[1]);
				if (n != n) { // shortcut for verifying if it's NaN
					n = 0;
				} else if (n != 0 && n != Infinity && n != -Infinity) {
					n = (n > 0 || -1) * Math.floor(Math.abs(n));
				}
			}
			if (n >= len) {
				return -1;
			}
			var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
			for (; k < len; k++) {
				if (k in t && t[k] === searchElement) {
					return k;
				}
			}
			return -1;
		};
	}

	// standard cross-browser event

	function addEvent(el, type, fn) {
		if (window.addEventListener) {
			el.addEventListener(type, fn, false);
		} else if (window.attachEvent) {
			el.attachEvent('on' + type, fn);
		} else {
			el['on' + type] = fn;
		}
	}

	window.FormClass = function(name) {

		'use strict';

		this.formName = document.forms[name];
		this.formRequired = {};
		this.validationIndValues = {};
		this.formRequiredMessage = [];
		this.formMessages = [];
		this.message = [];

	};

	FormClass.prototype.required = function(id, message) {

		'use strict';

		this.formRequired[id] = message;
	};

	FormClass.prototype.validationInd = function(id, action) {

		'use strict';

		this.validationIndValues[id] = action;

	};

	FormClass.prototype.errorMessage = function(message) {

		'use strict';

		if (message.length !== 0) {

			// do something with the error messages here

			alert(message.toString());

		} else {

			this.save();

		}

	};

	FormClass.prototype.save = function() {

		'use strict';

		var form = this.formName,
			x, l, formArray = ['fieldset', 'legend', 'submit', 'hidden'];

		// save form here

		for (x = 0, l = form.elements.length; x < l; x += 1) {

			// do not save unwanted form fields like submit

			if (formArray.indexOf(form.elements[x].type) === -1) {

				// do something with saved form values here

			}

		}

	};

	FormClass.prototype.validation = function() {

		'use strict';

		var validForm = function(event) {

				var i, l, x, anArray = [],
					e = event || window.event,
					doc = document,
					key, nodeListCheck,
					// declare the various types of input 
					inputArray = ['text', 'textarea', 'email', 'tel', 'password'];


				nodeListCheck = function(value) {

					for (x = 0, l = value.length; x < l; x += 1) {

						if (value[x].type === 'checkbox' || value[x].type === 'radio') {

							if (value[x].checked) {

								return true;

							}

						} // end if

					} // end for

					return false;

				}; // end function


				for (key in this.formRequired) {

					// loop through ruleList object literals
					if (this.formRequired.hasOwnProperty(key)) {


						// check to see if nodelist - radio or checkboxes
						if (typeof this.formName.elements[key].length === 'number' && typeof this.formName.elements[key].options === 'undefined') {

							if (!nodeListCheck(this.formName.elements[key])) {

								anArray.push(this.formRequired[key]);

							}

						}

						// check to see if nodelist - select
						if (typeof this.formName.elements[key].length === 'number' && typeof this.formName.elements[key].options !== 'undefined') {
						
						// create first option with a value of 0
							if (this.formName.elements[key].selectedIndex === 0) {

								anArray.push(this.formRequired[key]);

							}

						}

						// check if any of the required values are empty and is the right field type
						if (this.formName.elements[key].value === '' && inputArray.indexOf(this.formName.elements[key].type) !== -1) {

							anArray.push(this.formRequired[key]);

						} // end if

					} // end if

				}

				for (key in this.validationIndValues) {

					// loop through ruleList object literals
					if (this.validationIndValues.hasOwnProperty(key)) {

						if (this.validationIndValues[key].match(/email/g)) {

							// check if valid email address

							if (!this.formName.elements[key].value.match(/^(.+)@([^\(\);:,<>]+\.[a-zA-Z]{2,4})/)) {

								anArray.push('You have entered an incorrect email address');

							}

						}

						if (this.validationIndValues[key].match(/minimum/g)) {

							// check if number of characters is less than specified

							if (parseInt(this.formName.elements[key].value.length, 10) < parseInt(this.validationIndValues[key].match(/\d+\.?\d*/g), 10)) {

								anArray.push(this.validationIndValues[key]);

							}

						}

						if (this.validationIndValues[key].match(/maximum/g)) {

							// check if number of characers is more than specified

							if (parseInt(this.formName.elements[key].value.length, 10) > parseInt(this.validationIndValues[key].match(/\d+\.?\d*/g), 10)) {

								anArray.push(this.validationIndValues[key]);

							}

						}

					}

				} // end for loop

				this.errorMessage(anArray);

				// cross-brower prevent default
				if (e.preventDefault) {
					e.preventDefault();
				} else {
					e.returnValue = false;
					e.cancelBubble = true;
				}
			};

		// use bind to add bypass JavaScript scope and to be able to directly
		// access the FormClass object

		addEvent(this.formName, 'submit', validForm.bind(this));

	};

})(window, document);

window.onload = function () {

    // name attribute of form
    var contactForm = new FormClass('contactUs');

    // name attribute of form elements
    // use required if the form field is essential
    contactForm.required('contactName', 'Please fill in your contact name');
    contactForm.required('contactEmail', 'Please fill in your email address');

    // name attribute of form elements
    // use validationInd to create individual form field validation
    contactForm.validationInd('contactEmail', 'email');
    contactForm.validationInd('contactName', 'Please enter a minimum of 10 characters for a contact name');

    // use validation to run validation function
    // will produce error messages or save form if okay
    contactForm.validation();

};