// XML HTTP Form Data Validation API // // Author : Jesse Kyzar // Date : August 1, 2005 // --------------------------------------------------------------------------------------------------------- // validateFormData(fieldLabel, validationType, dataValue, required) // // Arguments: // fieldLabel - the name of the form field as it appears in the browser and is used in the error message to help the user identify the error; // validationType - must be firstName, lastName, ssn, dateString (formatted yyyy-mm-dd), email, phoneNumber, address, city, zipcode, or propName; // dataValue - the actual value to be tested; // required - must be a string stating either true or false and specifies whether or not this particular piece of data is required; // --------------------------------------------------------------------------------------------------------- // compareDates(date1, dateLabel1, date2, dateLabel2) // // Arguments: // date1 - a string in any valid date format; // dateLabel1 - the form label for this aprticular date field, used for highlighting in the event an error is found; // date2 - a string in any valid date format; // dateLabel2 - the form label for this aprticular date field, used for highlighting in the event an error is found; // --------------------------------------------------------------------------------------------------------- // validateFormField(errors, fieldID, restoreColor, fieldLabel, validationType, dataValue, required) // // Arguments: // errors - an array used to track all errors for a single form; // fieldID - the DHTML wrapper for the label of the field being validated used for highlighting; // restoreColor - the color to return the field label once an error has been cleared; // fieldLabel - the name of the field being validated used for building error message; // validationType - the type of validation to perform on the field data; // dataValue - the value captured from the form field; // required - true or false depending upon whether or not the field is required; // --------------------------------------------------------------------------------------------------------- // compareFormDates(errors, fieldID1, fieldID2, restoreColor, dateLabel1, date1, dateLabel2, date2) // // Arguments: // errors - an array used to track all errors for a single form; // fieldID1 - the DHTML wrapper for the label of the first date field being validated used for highlighting; // fieldID2 - the DHTML wrapper for the label of the second date field being validated used for highlighting; // restoreColor - the color to return the field label once an error has been cleared; // dateLabel1 - the name of the first date field being validated used for building error message; // date1 - the value captured from the first date field; // dateLabel2 - the name of the second date field being validated used for building error message; // date2 - the value captured from the second date field; // --------------------------------------------------------------------------------------------------------- // checkRequiredField(errors, fieldID, restoreColor, fieldLabel, dataValue) // // Arguments: // errors - an array used to track all errors for a single form; // fieldID - the DHTML wrapper for the label of the field being validated used for highlighting; // restoreColor - the color to return the field label once an error has been cleared; // fieldLabel - the name of the field being validated used for building error message; // dataValue - the value captured from the form field; // --------------------------------------------------------------------------------------------------------- // displayErrors(errors) // // Argument: // errors - an array containing all validation error messages // --------------------------------------------------------------------------------------------------------- // displayMessages(headerMessage, bodyMessage) // // Arguments: // headerMessage - boldfaced message to appear at the top of the error message display area // bodyMessage - submessages that provide detailed error information // --------------------------------------------------------------------------------------------------------- // --------------------------------------------------------------------------------------------------------- // XmlHttp_DataValidation.js is designed to provide a way of performing server-side data validation without // the necessity of submitting a web form. An additional script is needed to handle implementation. Returns // error information or the string 'Ok' if no validation errors are found. // --------------------------------------------------------------------------------------------------------- function validateFormData(fieldLabel, validationType, dataValue, required) { try { //create new instance of XML HTTP object and send request to server; if(window.XMLHttpRequest) { var validationRequest = new XMLHttpRequest(); } else { var validationRequest = new ActiveXObject("Microsoft.XMLHTTP"); } var validationURL = "/scripts/XmlHttp_DataValidation.cfm"; var validationParams = "fieldLabel=" + fieldLabel.replace(/(&)/, "%26") + "&" + validationType + "=" + escape(dataValue) + "&required=" + required; validationRequest.open("POST", validationURL, false); validationRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); validationRequest.setRequestHeader("Content-length", validationParams.length); validationRequest.setRequestHeader("Connection", "close"); validationRequest.send(validationParams); //return result if all went well; otherwise return an error message; if(validationRequest.status == "200") { //var validationResponse = validationRequest.responseXML.documentElement; //return validationResponse.childNodes[0].childNodes[0].text; return trim(validationRequest.responseText); } else { alert("HTTP Status: " + validationRequest.status); return "ERROR: No validation result returned. Notify Help Desk."; } } catch(e) { return "ERROR: Could not connect to data source. Notify Help Desk."; } } function compareDates(date1, dateLabel1, date2, dateLabel2) { try { //create new instance of XML HTTP object and send request to server; if(window.XMLHttpRequest) { var validationRequest = new XMLHttpRequest(); } else { var validationRequest = new ActiveXObject("Microsoft.XMLHTTP"); } var validationURL = "/scripts/XmlHttp_DataValidation.cfm"; var validationParams = "compareDates=true&date1=" + date1 + "&dateLabel1=" + dateLabel1 + "&date2=" + date2 + "&dateLabel2=" + dateLabel2; validationRequest.open("POST", validationURL, false); validationRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); validationRequest.setRequestHeader("Content-length", validationParams.length); validationRequest.setRequestHeader("Connection", "close"); validationRequest.send(validationParams); //return result if all went well; otherwise return an error message; if(validationRequest.status == "200") { return trim(validationRequest.responseText); } else { alert(validationRequest.status); return "ERROR: No validation result returned. Notify Help Desk."; } } catch(e) { return "ERROR: Could not connect to data source. Notify Help Desk."; } } function validateFormField(errors, fieldID, restoreColor, fieldLabel, validationType, dataValue, required) { var result = validateFormData(fieldLabel, validationType, dataValue, required); fieldID.style.color = restoreColor; if(result != "Ok") { errors.push(result); if(fieldID != null) { fieldID.style.color = "#ff0000"; } } return errors; } function compareFormDates(errors, fieldID1, fieldID2, restoreColor, dateLabel1, date1, dateLabel2, date2) { var result = compareDates(date1, dateLabel1, date2, dateLabel2); fieldID1.style.color = restoreColor; fieldID2.style.color = restoreColor; if(result != "Ok") { errors.push(result); if(fieldID1 != null) { fieldID1.style.color = "#ff0000"; } if(fieldID2 != null) { fieldID2.style.color = "#ff0000"; } } return errors; } function validateRadioButton(errors, fieldID, restoreColor, radioLabel, radioField) { var checked = 0; fieldID.style.color = restoreColor; for(var i = 0; i < radioField.length; i++) { if(radioField[i].checked) { checked++; } } var result = ((checked) ? "Ok" : radioLabel + " is required!"); if(result != "Ok") { errors.push(result); if(fieldID != null) { fieldID.style.color = "#ff0000"; } } return errors; } function checkRequiredField(errors, fieldID, restoreColor, fieldLabel, dataValue) { //remove all whitespace from user input var newDataValue = dataValue.replace(/[\s]+/, ""); //test length of result var result = ((newDataValue.length == 0) ? fieldLabel + " is required." : "Ok"); fieldID.style.color = restoreColor; if(result != "Ok") { errors.push(result); if(fieldID != null) { fieldID.style.color = "#ff0000"; } } return errors; } function displayErrors(errors) { document.getElementById('errorHeader').style.color = "#ff0000"; if(errors.length == 1) { document.getElementById('errorHeader').innerText = errors.length + " error was found in your request."; } else { document.getElementById('errorHeader').innerText = errors.length + " errors were found in your request."; } document.getElementById('errorMessages').style.color = "#ff0000"; var errorText = ""; var lineItem = 0; for(var i = 0; i < errors.length; i++) { lineItem++; errorText += lineItem.toString() + ") " + errors[i] + "\n"; } document.getElementById('errorMessages').innerText = errorText; } function displayMessages(headerMessage, bodyMessage) { document.getElementById('errorHeader').style.color = "#0000ff"; document.getElementById('errorHeader').innerText = headerMessage; document.getElementById('errorMessages').style.color = "#0000ff"; document.getElementById('errorMessages').innerText = bodyMessage; } function resetMessages() { if((document.getElementById('errorHeader').innerText.length > 0) || (document.getElementById('errorMessages').innerText.length > 0)) { document.getElementById('errorHeader').style.color = "#000000"; document.getElementById('errorHeader').innerText = ""; document.getElementById('errorMessages').style.color = "#000000"; document.getElementById('errorMessages').innerText = ""; } } function trim(strValue) { return strValue.replace(/^\s*|\s*$/g,''); }