Transformer v0.9

Transformer v0.9 is a comprehensive Javascript form validation tool.  It provides a functionality that is essential to any form of web-based data capture.  Using a Javascript-based client-side form validation tool such as this one reduces the load on your server's processor. 

Below is the full Transformer v0.9 script.  Simply include it into the header of your HTML page and then call it from whichever form you would like to validate by setting its "onsubmit" attribute equal to "return validate(this)". 

For example, the following form includes two input fields.  Both of them have a class of "required".   This tells the Transformer that those fields are required.  If the user attempts to submit the form with an empty required field, the Transformer will generate a warning and the user will be unable to submit the form until the required information is provided. 

In addition, the "confirm_pwd" field has the prefix "confirm_" which is automatically recognized and flags the input as a confirmation of the element with the id "pwd".  This tells the Transformer to make sure that the values entered in both fields are exactly the same.  Otherwise, another warning is generated and the offending regions will be highlighted.

<form id="registration_form" 
	name="registration" 
	action="submit_to.ext" 
	method="post" 
	onsubmit="return validate(this)">

<input id="pwd" 
	name="pwd"  
	type="password"  
	value=""  
	title="Password"  
	size="30"  
	style="width:200px"  
	maxlength="16"  
	class="required" />

<input id="confirm_pwd"  
	name="confirm_pwd" 
	type="password"  
	value=""  
	title="Confirm Password"  
	size="30"
	style="width:200px"  
	maxlength="16"  
	class="required" />

The javascript: 

/*
 * Transformer v.0.9 Form Validator
 * To be used with Tranformer v.0.9 Form Creator
 *
 * Author: Steven Moseley
 * Company: Transio, LLC
 * Website: http://www.transio.com
 *
 * This script is licensed under the Free Tools Licensing Agreement of
 * Transio, LLC, found on Transio's website at: http://www.transio.com/license
 *
 * Use of this code implies agreement with the terms of the license.
 *
 * Leave this notice in tact.
 */

// Validates all fields in the specified form
function validate(form) {
	var inputs = form.getElementsByTagName('*');
	var valid = true;
	var message = '';

	// Search for invalid inputs
	var i;
	for (i = 0; i < inputs.length; i++) {
		var ok = true;
		var input = inputs[i];
        var inputClass = input.getAttribute('class') ? input.getAttribute('class') : '';
        
		var tagName = input.tagName ? input.tagName : '';
		var name = input.getAttribute('name') ? input.getAttribute('name') : '';
		var title = input.getAttribute('title') ? input.getAttribute('title') : '';
		var required = inputClass.indexOf('required_field') >= 0;
		var format = inputClass.indexOf('format_') >= 0 ? inputClass.substr(inputClass.indexOf('format_') + 7) : '';
		var minlength = !isNaN(input.getAttribute('minlength')) && input.getAttribute('minlength') > 0 ? input.getAttribute('minlength') : 0;
		var format = input.getAttribute('format') ? input.getAttribute('format') : '';
		var confirm = name.indexOf('confirm_') == 0 ? name.substr(8) : '';
	
		// Required radio list
		if (required && input.getAttribute('type') == 'radio') {
			if (!checkRadio(name)) {
				message += '"' + title + '" is required.  Please select one.\n';
				ok = false;
			}
		}

		// Required Input test
		if (required && minlength <= 0 && format.length == 0) {
			if (tagName == 'select') {
				if (!input.options || input.options.length == 0 || !input[input.selectedIndex].value || input[input.selectedIndex].value == '') {
					message += '"' + title + '" is required.  Please make a selection.\n';
					ok = false;
				}
			} else {
				if (input.value.length == 0) {
					message += '"' + title + '" is a required field.\n';
					ok = false;
				}
			}
		}

		// Minlength test
		if (minlength > 0) {
			if (input.value.length < minlength) {
				message += '"' + title + '" has a minimum required length of ' + minlength + ' characters.\n';
				ok = false;
			}
		}

		// Format test
		if (format.length > 0) {
			if (format.toLowerCase() == 'email') {
				if (input.value.indexOf('@') <= 0 || input.value.indexOf('.') <= 0  || input.value.length < 6) {
					message += '"' + title + '" is not a proper email format.\n';
					ok = false;
				}
			} else if (format.toLowerCase() == 'mmdd') {
				//var mm = input.value.substring(0, 2);
				//var dd = input.value.substring(2);
				if (input.value.length < 4 || Math.isNaN(input.value)) {
					message += '"' + title + '" is not a proper MMDD date format.\n';
					ok = false;
				}
			} else if (format.toLowerCase() == 'numeric') {
				if (!isFloatingPointNumber(input.value)) {
					message += '"' + title + '" must be a number.\n';
					ok = false;
				}
			} else if (format.toLowerCase() == 'int') {
				if (!isInt(input.value)) {
					message += '"' + title + '" must be a whole number.\n';
					ok = false;
				}
			}

			// Regular Expressions
			//regex = input.format;
			//ok = ok && regex.exec(input.value);

		}

		// Confirm input test
		if (confirm.length > 0) {
			confirmInput = document.getElementById(confirm);
			if (confirmInput && input.value != confirmInput.value) {
				confirmTitle = confirmInput.getAttribute('title') ? confirmInput.getAttribute('title') : 'Input';
				message += '"' + confirmTitle + '" and "' + title + '" do not match.\n';
				ok = false;
			}
		}

		// Focus on first bad input
		if (!ok) {
			input.style.backgroundColor = '#FF0000';
			input.style.color = '#FFFFFF';
			if (valid) {
				try {
					input.focus();
				} catch (e) {
				}
			}
			valid = false;
		} else {
			input.style.backgroundColor = '';
			input.style.color = '';
		}
	}
	if (message.length > 0) {
		window.alert(message);
	}
	return valid;
}

function checkRadio(name) {
	var inputs = document.getElementsByName(name);
	var checked = false;
	var i;
	for (i = 0; i < inputs.length; i++) {
		var input = inputs[i];
		checked = checked || input.checked;
	}
	return checked;
}

function allowOnlyFloatingPointNumbers(textbox, val){

	val = val.replace(/[^0-9.-]/g, ''); // strip non-digit chars
	val = stripDuplicateChars(val, '.', 1, 0); // strip excess decimals
	val = stripDuplicateChars(val, '-', 0, 1); // strip excess minus signs
	textbox.value = val; // replace textbox value
	if (!isFloatingPointNumber(val)){ alert('This is not a valid number, please correct it...');}
}

function isFloatingPointNumber(val) {
	return isNumeric(val, false);
}

function isInt(val) {
	return isNumeric(val, true);
}

function isNumeric(val, isInt) {
	var validChars = "0123456789" + (isInt ? "" : ".");
	var isNumber = true;
	for (var i = 0; i < val.length && isNumber == true; i++) {
		var char = val.charAt(i);
		isNumber = isNumber && validChars.indexOf(char) > -1;
	}
	return isNumber;
}

function stripDuplicateChars(str, strip, n, s){
	var count=0; var stripped=str.substring(0, s); var chr;
	for (var i=s; i<str.length; i++){ chr = str.substring(i, i+1);
		if (chr == strip) {
			count++;
			if (count<n+1) {
				stripped = stripped + chr;
			}
		} else {
			stripped = stripped + chr;
		}
	}
	return stripped;
}

// Focuses on the first <input> or <select> field in the specified form
function focusForm(formId) {
	var elements = (formId)
			? document.getElementById(formId).getElementsByTagName('*')
			: document.getElementsByTagName('*');
	for (var i = 0; i < elements.length; i++) {
		input = elements[i];
		if (input.tagName.toLowerCase() == 'input' ||
				input.tagName.toLowerCase() == 'select') {
			input.focus();
			break;
		}
	}
	return true;
}

function toggleCheckbox(id) {
	var checkbox = document.getElementById(id);
	checkbox.checked = !checkbox.checked;
}

// Shows or hides the specified form
function showForm(formId) {
	document.getElementById(formId).style.display = '';
	document.getElementById('hide_' + formId).style.display = '';
}

function hideForm(formId) {
	document.getElementById(formId).style.display = 'none';
	document.getElementById('hide_' + formId).style.display = 'none';
}

function confirmDelete(itemName, deleteUrl) {
	if (window.confirm('Are you sure you want to delete:\n' + itemName + '?')) {
		window.location = deleteUrl;
	}
}

function loadSelected(pageUrl, selectField, persistedParameters) {
	var idName = selectField.name;
	var id = selectField[selectField.selectedIndex].value;
	if (id > 0) {
		var location = pageUrl + '?' + idName + '=' + id;
		for (var i = 0; i < persistedParameters.length; i++) {
			location += '&' + persistedParameters[i][0] + '=' + persistedParameters[i][1];
		}
		window.location.href = location;
	}
}

function loadType(typeField) {
	var typeId = typeField[typeField.selectedIndex].value;
	var subtypeField = document.getElementById("listing_subtype_id");
	for (var i = 0; i < subtypeField.length; i++) {
		var option = subtypeField[i].id;
		var optionTypeId = option.substring(option.indexOf("_") + 1, option.indexOf("."));
		if (optionTypeId == typeId || optionTypeId == '') {
			subtypeField[i].style.display = '';
		} else {
			subtypeField[i].style.display = 'none';
		}
	}
}

function getParameter(key) {
	var querystring = window.location.search.substring(1);
	var parameters = querystring.split('&');
	for (var i = 0; i < parameters.length; i++) {
		var pos = parameters[i].indexOf('=');
		if (pos > 0) {
			if (key == parameters[i].substring(0, pos)) {
				return '&' + parameters[i];
			}
		}
	}
	return '';
}