// JavaScript Document
/*
This is a good style rule to put in your css:
#error_box {
width: 60%;
border: 1px solid red;
color: red;
display: none;
text-align: center;
padding-bottom: 20px;
background: #fff;
}
*/
/*
Global Regexes for field validation
*/
var validation_regex = new Array();
validation_regex['email'] = /^(([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+)$/;
validation_regex['phone'] = /^[0-9.,-_\s]{10,}$/;
validation_regex['creditcard'] = /^[0-9]{16,}$/;
validation_regex['fax'] = /^[0-9.,-_\s]{10,}$/;
var validation_messages = new Array();
validation_messages['email'] = "Please enter a valid email.";
validation_messages['phone'] = "Please enter a valid phone number.";
validation_messages['fax'] = "Please enter a valid fax number.";
validation_messages['password'] = "The password fields do not match.";
validation_messages['creditcard'] = "Please enter a valid credit card number.";
/*
This looks for inputs and selects that have a class of the format: required_xx or required_validationtype_xx.
Having found one, it finds the label with the same class name and
colors it the highlighted color if that input did not validate
*/
function validate_forms() {
//settings
var highlight_color = "#e80000";
var default_color = "#6d6864";
var error_title = "Required Fields Missing";
var error_msg = "Please fill in all required fields. \n";
//local variables
var input_array = document.getElementsByTagName("input");//get all the input elements
var select_array = document.getElementsByTagName("select");
var textarea_array = document.getElementsByTagName("textarea");
input_array = combine_arrays(input_array, select_array);
input_array = combine_arrays(input_array, textarea_array);
var valid_item;
var valid_form = true;
var input;
var label;
var temp_array;
var validation_filter;
var parameters;
var passwords = new Array();
var good_labels = new Array();
var bad_labels = new Array();
var class_name;
//loop through each div, checking if it is required
for( i = 0; i < input_array.length; i++ ) {
if(input_array[i].className.indexOf("required_") != -1) {
class_name = strip_nonrequired_class_names(input_array[i].className);
valid_item = true;
parameters = class_name.split("_");
//grab the corresponding label
temp_array = document.getElementsByTagName("label");
var label_class_name;
for( j = 0; j < temp_array.length; j++) {
label_class_name = strip_nonrequired_class_names(temp_array[j].className);
if (label_class_name == class_name) {
label = temp_array[j];
}
}
//special case for passwords
if( parameters.length == 3 && parameters[1] == 'password' ) {
//first time we've seen this numbered password
if ( !has_index(passwords, parameters[2]) ){
passwords[parameters[2]] = input_array[i].value;
}
//second time
else {
//they match and aren't blank
if (passwords[parameters[2]] == input_array[i].value &&
input_array[i].value != "") {
color_labels(class_name, default_color);
} else {
//they don't match so color them
color_labels(class_name, highlight_color);
valid_item = false;
error_msg += validation_messages['password'] + " \n";
}
}
}
//special case for other/hidden fields
if( parameters.length == 3 && parameters[1] == 'other' ) {
//if it is hidden let it pass if not check if it is blank
if(input_array[i].style.display != "none"){
if (input_array[i].value == "") {
valid_item = false;
} else {
break;
}
}
}
//figure out type of validation (classes should be named: required_typeofvalidation_number, or required_number)
//example: required_email_01, or required_01
if( parameters.length == 3) {
validation_filter = validation_regex[parameters[1]];
if (validation_filter && !validation_filter.test(input_array[i].value)) {
valid_item = false;
error_msg += validation_messages[parameters[1]] + " \n";
}
}
//special case for radio buttons
if ( input_array[i].type == "radio" ) {
radioBtn = document.getElementsByName(input_array[i].name);
var checked = false;
for (var x=radioBtn.length-1; x > -1; x--) {
if(radioBtn[x].checked) {
checked = true;
}
}
if(!checked) {
valid_item = false;
}
}
//check if the field is blank
if (input_array[i].value == "" && parameters[1] != 'other') {
valid_item = false;
}
//color the label if it's not valid
if ( !valid_item ) {
label.style.color = highlight_color;
valid_form = false; //if any of the items were invalid, the whole form is invalid
//this is for labels that correspond to multiple inputs, such as dates
bad_labels.push(label);
} else {
label.style.color = default_color;
//this is for labels that correspond to multiple inputs, such as dates
good_labels.push(label);
}
}
}
//color labels, do good ones first, because bad trumps good
//this is for labels that correspond to multiple inputs, such as dates
for (var i = 0; i < good_labels.length; i++) {
good_labels[i].style.color = default_color;
}
for (var i = 0; i < bad_labels.length; i++) {
bad_labels[i].style.color = highlight_color;
}
if(valid_form == false) {
print_error( error_title, error_msg);
}
return valid_form;
}
function print_error(title, content) {
var error_box = document.getElementById("error_box");
//drop the title
// document.getElementById("title_section").getElementsByTagName("h2")[0].style.display = "none";
error_box.innerHTML = "
" + title + "
" + content;
error_box.style.display = "block";
}
function color_labels(class_name, color) {
temp_array = document.getElementsByTagName("label");
for( j = 0; j < temp_array.length; j++) {
if (temp_array[j].className.indexOf(class_name) != -1) {
temp_array[j].style.color = color;
}
}
}
function has_index(array, index){
var return_value = false;
if(array[index]) {
return_value = true;
}
if(array[index] == "") {
return_value = true;
}
return return_value;
}
function combine_arrays(array1, array2){
var newarray = new Array();
for ( i = 0; i < array1.length; i++ ) {
newarray.push(array1[i]);
}
for ( i = 0; i < array2.length; i++ ) {
newarray.push(array2[i]);
}
return newarray;
}
//this is to trim the other class names from input_array[i].className
//for example: