Skip to content

Instantly share code, notes, and snippets.

@TCotton
Last active September 18, 2020 13:09
Show Gist options
  • Save TCotton/4772340 to your computer and use it in GitHub Desktop.
Save TCotton/4772340 to your computer and use it in GitHub Desktop.
A JavaScript reusable form class
/* 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();
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment