From 775ca57965b1a3668bc65bb8c1249d0f40fa620d Mon Sep 17 00:00:00 2001 From: Shankar Thiyagaraajan Date: Mon, 16 Jan 2017 08:40:03 +0530 Subject: [PATCH] Update formValidator.js --- src/js/formValidator.js | 201 ++++++++++++++++++---------------------- 1 file changed, 91 insertions(+), 110 deletions(-) diff --git a/src/js/formValidator.js b/src/js/formValidator.js index 90d8a6b..5b3fd32 100644 --- a/src/js/formValidator.js +++ b/src/js/formValidator.js @@ -1,22 +1,29 @@ - //---------------------Form New Ticket--------------------------- var warning_font_color = '#761c19'; var warning_class = ''; var form = { + // TODO: Implement Validation for : 'select' + // TODO: Simplify the "TextArea" Validation. validate: function (form) { - var parent_form = document.getElementById(form); - var st_form_inputs = parent_form.getElementsByTagName('input'); - var st_form_labels = parent_form.getElementsByTagName('label'); + var form_el = document.getElementById(form); + var st_form_inputs = form_el.getElementsByTagName('input'); + var st_form_textArea = form_el.getElementsByTagName('textarea'); + var st_form_select = form_el.getElementsByTagName('select'); + var st_form_labels = form_el.getElementsByTagName('label'); + console.log(st_form_inputs); // ----------------------------------RESET ERRORS---------------------------------------------- // Remove all Alter Elements. var elements = document.getElementsByClassName('alert_message'); while (elements[0]) { elements[0].parentNode.removeChild(elements[0]); } -// ----------------------------------VALIDATE AND POPULATE------------------------------------- +// **********************************VALIDATE AND POPULATE****************************************** + +// ----------------------------------GENERAL VALIDATION [Input]------------------------------------- + // Start Searching Elements for Validation. for (var i = 0; i < st_form_inputs.length; i++) { if (st_form_inputs[i].required == true) { @@ -92,62 +99,15 @@ var form = { } } - // ------------------------------------------------------------------------------------------- - return result; - } -}; - -var helper = { - // To Convert First Char to Uppercase. - toUCFirst: function (text) { - if (text && text.length > 0) { - text = text.toString(); - return text.charAt(0).toUpperCase() + text.slice(1); - } - return text; - }, - // To Validate Email. - validateEmail: function (email) { - // Convert to Native String Format. - email = email.toString(); - // To Check it as String or Not. - if (!email) return false; - if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) { - // Valid Email. - return true; - } - // In-Valid Email. - return false; - }, - setFontColor: function (code) { - if (code.indexOf('#') == -1) { - code = '#' + code; - } - warning_font_color = code.toString(); -//---------------------Form New Ticket--------------------------- -var warning_font_color = '#761c19'; -var warning_class = ''; -var form = { - validate: function (form) { + // ---------------------MANUAL VALIDATION [TextArea]--------------------------------------- - var st_form_inputs = document.getElementById(form).getElementsByTagName('input'); - var st_form_labels = document.getElementById(form).getElementsByTagName('label'); - -// ----------------------------------RESET ERRORS---------------------------------------------- - // Remove all Alter Elements. - var elements = document.getElementsByClassName('alert_message'); - while (elements[0]) { - elements[0].parentNode.removeChild(elements[0]); - } -// ----------------------------------VALIDATE AND POPULATE------------------------------------- - // Start Searching Elements for Validation. - for (var i = 0; i < st_form_inputs.length; i++) { - if (st_form_inputs[i].required == true) { + for (var i = 0; i < st_form_textArea.length; i++) { + if (st_form_textArea[i].required == true) { // Finding Label to Populate Response. for (var ia = 0; ia < st_form_labels.length; ia++) { // Label should match with its 'For' property. - if (st_form_labels[ia].htmlFor == st_form_inputs[i].name) { + if (st_form_labels[ia].htmlFor == st_form_textArea[i].name) { var targetLabel = st_form_labels[ia]; } } @@ -155,68 +115,72 @@ var form = { // Initial Dummy Response. var response = ''; var result = true; - var error_hit = false; - if (targetLabel == undefined) continue; - - var label_core = targetLabel.outerHTML; + var label_core = targetLabel.innerHTML; var field_name = targetLabel.htmlFor; - var field_value = st_form_inputs[i].value; - var field_type = st_form_inputs[i].type; + var field_value = st_form_textArea[i].value; + var field_type = st_form_textArea[i].type; + // Basic Field Empty Validation. if (field_value == '') { - response = label_core + '' + + response = label_core + ' ' + helper.toUCFirst(field_name) + ' is Required'; - error_hit = true; } else if (field_type == 'select') { if (field_value == '0') { response = 'This Field is Required'; - error_hit = true; } } - // Validate with Min Value Restriction. - var min = st_form_inputs[i].min; - if (min && !error_hit) { - if (field_value.length < min && field_value.length != 0) { - response = label_core + '' - + helper.toUCFirst(field_name) - + ' should greater than ' + min + '.'; - error_hit = true; - } - } - // Validate with Max Value Restriction. - var max = st_form_inputs[i].max; - if (max && !error_hit) { - if (field_value.length > max && field_value.length != 0) { - response = label_core + '' - + helper.toUCFirst(field_name) - + ' should less than ' + max + '.'; - error_hit = true; + + // If there is no 'Response', then re-init default value. + if (response == '' || response.length == 0) { + response = label_core; + } else { + if (result == true) { + result = false; } } - //Validate with Email Restriction. - if (st_form_inputs[i].type == 'email' && !error_hit) { - if (!helper.validateEmail(field_value) && field_value.length != 0) { - response = label_core + ' ' - + ' Invalid Email Format.'; - error_hit = true; + + // Updating Response to Label. + targetLabel.innerHTML = response; + } + } + + // ---------------------MANUAL VALIDATION [Select]--------------------------------------- + for (var i = 0; i < st_form_select.length; i++) { + if (st_form_select[i].required == true) { + + // Finding Label to Populate Response. + for (var ia = 0; ia < st_form_labels.length; ia++) { + // Label should match with its 'For' property. + if (st_form_labels[ia].htmlFor == st_form_select[i].name) { + var targetLabel = st_form_labels[ia]; } } - // Password Match Validation. - if (st_form_inputs[i].getAttribute('match') !== null && !error_hit) { - var match_field = st_form_inputs[i].getAttribute('match'); - var first_element = document.getElementsByName(match_field); - if (first_element[0].value == '') { - error_hit = true; - response = label_core + 'Password should not be empty'; - } else if (first_element[0].value !== st_form_inputs[i].value) { - response = label_core + 'Password doesn\'t match. '; - error_hit = true; + // Initial Dummy Response. + var response = ''; + var result = true; + + var label_core = targetLabel.innerHTML; + var field_name = targetLabel.htmlFor; + + var field_value = st_form_select[i].value; + var field_type = st_form_select[i].type; + + + // Basic Field Empty Validation. + if (field_value == 0) { + + response = label_core + ' ' + + 'Choose valid Option '; + } else if (field_type == 'select') { + if (field_value == '0') { + response = 'Choose valid option'; } } @@ -232,10 +196,11 @@ var form = { // Updating Response to Label. targetLabel.innerHTML = response; - } } - // ------------------------------------------------------------------------------------------- + + // ------------------------------------------------------------------------------------ + return result; } }; @@ -248,6 +213,14 @@ var helper = { return text.charAt(0).toUpperCase() + text.slice(1); } return text; + var data = { + form: 'new_ticket_form', + warning_color: 'aa0000', + new_class: 'test' + }; + + // Default Form Init. + validate(data); }, // To Validate Email. validateEmail: function (email) { @@ -301,16 +274,14 @@ function validate(data) { event.preventDefault(); } }); - + //TODO: Implement Self Field Validation. + } else if (st_form_inputs[i].type == 'text') { + st_form_inputs[i].addEventListener('change', function (event) { + if (!initValidation(data.form)) { + event.preventDefault(); + } + }); } - //TODO: Implement Self Field Validation. - //else if (st_form_inputs[i].type == 'text') { - // st_form_inputs[i].addEventListener('change', function (event) { - // if (!initValidation(data.form)) { - // event.preventDefault(); - // } - // }); - //} } } @@ -318,3 +289,13 @@ function validate(data) { function initValidation(activeForm) { return form.validate(activeForm); } + + +var data = { + form: 'new_ticket_form', + warning_color: 'aa0000', + new_class: 'test' +}; + +// Default Form Init. +validate(data);