dwhite440
4/10/2018 - 8:54 PM
Validate form
validate form
//
// Global Variables
//
var errorMessages = {};
var valuechecks = {};
var validatedArray = new Array();
var url = 'validateField';
// -----------------------------------------------------------------------------------
$(function () {
// initialize()
// Constructor runs on completion of the DOM loading. Loops through anchor tags looking for
// 'validating' references and applies onclick events to appropriate links. The 2nd section of
// the function inserts html at the bottom of the page which is used to display the shadow
// overlay and the image container.
//
window.initValitating = function() {
if (!document.getElementsByTagName){ return; }
//var inputs = document.getElementsByTagName('input');
var inputs = document.querySelectorAll('input,select');
// loop through all inputs
for (var i=0; i<inputs.length; i++){
var input = inputs[i];
var validateAttribute = String(input.getAttribute('validate'));
var inputId = String(input.getAttribute('id'));
if (validateAttribute.indexOf('true') > -1 || validateAttribute.indexOf('required') > -1 || validateAttribute.indexOf('matches') > -1){
input.onblur = function (e) {
var e=window.event || e;
start(this);
}
input.onkeydown = function (e) {
var e=window.event || e;
var keyNum;
if(window.event) keyNum = e.keyCode;
else if(e.which) keyNum = e.which;
}
//input.onclick = function () {displayError(this);}
input.onfocus = function () {
addValueCheck(this);
clearOnFocusIcon(String(this.getAttribute('id')));
}
}
}
};
//
// start()
// Display validate_dialog.
//
var start = function(inputObj) {
var inputId = String(inputObj.getAttribute('id'));
var validateAttribute = String(inputObj.getAttribute('validate'));
var fieldTitle = String(inputObj.getAttribute('data-name'));
var matchId = "";
if(validateAttribute.indexOf('matches') > -1)
{
var matches = validateAttribute.match(/matches\((.*)\)/);
if(matches.length > 0) matchId = matches[1];
}
if(inputObj.value == '' && validateAttribute.indexOf('required') > -1)
{
var errorMessage = "The <strong>" + fieldTitle + "</strong> is required.";
colorFieldAndSaveMessage(errorMessage, inputObj);
}
else if(matchId != '' && matchId.length > 0 && validateAttribute.indexOf('matches') > -1 && document.getElementById(matchId).value != inputObj.value)
{
var matchField = document.getElementById(matchId);
var fieldTitle2 = matchField.getAttribute('data-name');
var errorMessage = "The <strong>" + fieldTitle + "</strong> doesn't match the <strong>" + fieldTitle2 + "</strong>.";
colorFieldAndSaveMessage(errorMessage, inputObj);
}
else if (validateAttribute.indexOf('true') > -1){
if (hasValueChanged(inputObj)) {
var validateName = String(inputObj.getAttribute('name'));
validatedArray.push(inputId);
$.ajax({
url: url,
type: "POST",
data: {name : validateName, value : inputObj.value},
dataType: "html",
success: function(data){
colorFieldAndSaveMessageRequest(data, inputObj);
}
});
}
else
{
showOnBlurNoChange(inputId);
}
}
else
{
if(validateAttribute.indexOf('display_OK') > -1 && inputObj.value.length > 0)
{
displayOK(inputId);
}
else
{
clearValidateMessage(inputId);
}
}
},
colorFieldAndSaveMessageRequest = function(data, inputObj) {
colorFieldAndSaveMessage(data, inputObj);
},
colorFieldAndSaveMessage = function(responseText, inputObj) {
var inputId = String(inputObj.getAttribute('id'));
var validateMessage = responseText;
if(validateMessage != null && validateMessage != '') {
displayValidateMessage(inputId, validateMessage);
var ele = $("#"+inputId);
}
else {
var validateAttribute = String(inputObj.getAttribute('validate'));
if(validateAttribute.indexOf('display_OK') > -1 && inputObj.value.length > 0)
{
displayOK(inputId);
}
else
{
clearValidateMessage(inputId);
}
}
},
displayOK = function(inputId) {
var ele = $('#'+inputId);
if ( ele instanceof jQuery ) {
ele = ele[0]; //get the DOM element from the jQuery object
}
ele.style.borderColor = "#b7b7b7";
$(ele).removeClass('field_error');
var eleType = ele.type.toUpperCase();
var parentDiv = ele.parentNode;
if (parentDiv) {
if (parentDiv.className != "status_group") {
$(ele).wrap('<div class="status_group"></div>');
parentDiv = ele.parentNode;
}
if (parentDiv.className == "status_group") {
if (eleType != "SELECT-ONE" && eleType != "SELECT-MULTIPLE") {
if ($(parentDiv).find($('.field_status')).length > 0) {
$(parentDiv).find($('.field_status')).removeClass('error').addClass('ok');
$(parentDiv).find($('.field_status')).removeClass('hide');
}
else {
var errorSpan = document.createElement('span');
errorSpan.setAttribute('id', inputId + '_status');
errorSpan.setAttribute('class', 'field_status ok');
parentDiv.appendChild(errorSpan);
}
}
if ($(parentDiv).find($('.validate_error')).length > 0) {
$(parentDiv).find($('.validate_error')).remove();
}
}
}
},
clearOnFocusIcon = function(inputId) {
var ele = $('#' + inputId);
if (ele instanceof jQuery) {
ele = ele[0]; //get the DOM element from the jQuery object
}
var parentDiv = ele.parentNode;
if (parentDiv) {
if (parentDiv.className == "status_group") {
if ($(parentDiv).find($('.field_status')).length > 0) {
$(parentDiv).find($('.field_status')).addClass('hide');
}
if ($(parentDiv).find($('.validate_error')).length > 0) {
$(parentDiv).find($('.validate_error')).addClass('hide');
}
}
}
},
showOnBlurNoChange = function(inputId) {
var ele = $('#' + inputId);
if (ele instanceof jQuery) {
ele = ele[0]; //get the DOM element from the jQuery object
}
var parentDiv = ele.parentNode;
if (parentDiv) {
if (parentDiv.className == "status_group") {
if ($(parentDiv).find($('.field_status')).length > 0) {
$(parentDiv).find($('.field_status')).removeClass('hide');
}
if ($(parentDiv).find($('.validate_error')).length > 0) {
$(parentDiv).find($('.validate_error')).removeClass('hide');
}
}
}
},
clearValidateMessage = function(inputId) {
var ele = $('#' + inputId);
if (ele instanceof jQuery) {
ele = ele[0]; //get the DOM element from the jQuery object
}
ele.style.borderColor = "#b7b7b7"; //none
$(ele).removeClass('field_error');
var parentDiv = ele.parentNode;
if (parentDiv) {
if (parentDiv.className == "status_group") {
if ($(parentDiv).find($('.field_status')).length > 0) {
$(parentDiv).find($('.field_status')).addClass('hide');
}
if ($(parentDiv).find($('.validate_error')).length > 0) {
$(parentDiv).find($('.validate_error')).remove();
}
}
}
},
displayValidateMessage = function(inputId, validateMessage) {
var ele = $('#'+inputId);
if ( ele instanceof jQuery ) {
ele = ele[0]; //get the DOM element from the jQuery object
}
var isWarning = validateMessage && validateMessage.indexOf('<!--warning-->') > -1;
if(isWarning)
{
ele.style.borderColor = "#f8b000";
}
else
{
ele.className = ele.className + " field_error";
//ele.style.bkColor = ele.style.backgroundColor;
//ele.style.backgroundColor = "#ebc6ca";
ele.style.borderColor = "#A10E1E";
}
var eleType = ele.type.toUpperCase();
var parentDiv = ele.parentNode;
if (parentDiv) {
if (parentDiv.className != "status_group") {
$(ele).wrap('<div class="status_group"></div>');
parentDiv = ele.parentNode;
}
if (parentDiv.className == "status_group") {
if (eleType != "SELECT-ONE" && eleType != "SELECT-MULTIPLE") {
if ($(parentDiv).find($('.field_status')).length > 0) {
if(isWarning) {
$(parentDiv).find($('.field_status')).removeClass('lock_fail').removeClass('lock_secure').removeClass('lock').removeClass('ok').removeClass('error').addClass('warning');
}
else
{
$(parentDiv).find($('.field_status')).removeClass('lock_fail').removeClass('lock_secure').removeClass('lock').removeClass('ok').removeClass('warning').addClass('error');
}
$(parentDiv).find($('.field_status')).removeClass('hide');
}
else {
var errorSpan = document.createElement('span');
errorSpan.setAttribute('id', inputId + '_status');
if(isWarning)
errorSpan.setAttribute('class', 'field_status warning');
else
errorSpan.setAttribute('class', 'field_status error');
parentDiv.appendChild(errorSpan);
}
}
if ($(parentDiv).find($('.validate_error')).length > 0) {
if(isWarning) {
$(parentDiv).find($('.validate_error')).addClass('warning');
}
else
{
$(parentDiv).find($('.validate_error')).removeClass('warning');
}
$(parentDiv).find($('.validate_error')).removeClass('hide');
$(parentDiv).find($('.validate_error')).html(validateMessage);
}
else {
//<span id="user_name_error" class="block_message validate_error" for="user_name" role="alert">This Username is already taken.</span>
var validationSpan = document.createElement('span');
validationSpan.setAttribute('id', inputId + '_error');
if(isWarning) {
validationSpan.setAttribute('class', 'block_message validate_error warning');
}
else
{
validationSpan.setAttribute('class', 'block_message validate_error');
}
validationSpan.setAttribute('for', inputId);
validationSpan.setAttribute('role', "alert");
validationSpan.innerHTML = validateMessage;
parentDiv.appendChild(validationSpan);
}
}
}
},
addValueCheck = function(inputObj) {
var inputId = String(inputObj.getAttribute('id'));
addValuecheck(inputId,inputObj.value);
},
addValuecheck = function (id, value)
{
if (id in valuechecks) {
valuechecks[id] = value;
} else {
valuechecks[id] = value;
}
},
getValuecheck = function (id)
{
if (id in valuechecks) {
return valuechecks[id];
} else {
return "";
}
},
hasValueChanged = function(inputObj) {
var inputId = String(inputObj.getAttribute('id'));
var value = getValuecheck(inputId);
if(value != inputObj.value)
return true;
return false;
}
});
// ----------------------------------------------------------------------------------
jQuery(document).ready(function() {
initValitating();
});