From 2756be2eb5b4543d71baaf0c260509fec66b1403 Mon Sep 17 00:00:00 2001 From: shankarThiyagaraajan Date: Thu, 4 May 2017 16:51:03 +0530 Subject: [PATCH] - Validation response handling Improved [Core & ES6]. --- src/demo/index2.html | 24 +++++++-- src/js/validatorNew.es6.js | 103 ++++++++++++++++++++++--------------- src/js/validatorNew.js | 94 ++++++++++++++++++++------------- 3 files changed, 137 insertions(+), 84 deletions(-) diff --git a/src/demo/index2.html b/src/demo/index2.html index 657b1db..b1c5ca2 100644 --- a/src/demo/index2.html +++ b/src/demo/index2.html @@ -9,7 +9,8 @@
- +
@@ -22,7 +23,19 @@
- + +
+
+ + +
+
+ + +
+
+ +
@@ -42,7 +55,8 @@ // required: 'This field is required 123 !', // min: '
This field is less then the limit [INDEX]', // max: 'This field is exceeds the limit of [INDEX]', -// password: 'Password doesn\'t match !' +// password: 'Password doesn\'t match !', +// email: 'Invalid Email found !' // } // }); @@ -53,9 +67,9 @@ required: 'This field is required !', min: 'This field is less then the limit [INDEX]', max: 'This field is exceeds the limit of [INDEX]', - password: 'Password doesn\'t match !' + password: 'Password doesn\'t match !', + email: 'Invalid Email found !' } - }); diff --git a/src/js/validatorNew.es6.js b/src/js/validatorNew.es6.js index 29ca59b..16b4087 100644 --- a/src/js/validatorNew.es6.js +++ b/src/js/validatorNew.es6.js @@ -121,7 +121,7 @@ class jsValidator { option.push({'errorElem': errorList}); - jsLogger.out('Error List', option); + // jsLogger.out('Error List', option); // To Update global Validation Status. // If, Input elements have no errors. @@ -148,7 +148,7 @@ class jsValidator { // Initiate empty array for keep list of errors. let log = []; if (formElem === null || typeof formElem === 'undefined') return false; - jsLogger.out('Elem Loop Filter', formElem); + // jsLogger.out('Elem Loop Filter', formElem); // Looping elements. for (let i in formElem) { if (formElem[i]) { @@ -173,7 +173,7 @@ class jsValidator { // Apply filter for Email elements. if (activeElem.type == 'email') this.jsFilter.constructor.email(activeElem); // Apply filter for Numeric elements. - if (activeElem.min || activeElem.max) this.jsFilter.limit(activeElem); + // if (activeElem.min || activeElem.max) this.jsFilter.limit(activeElem); // Apply filter with string, alphaNumeric and pregMatch. if (activeElem.getAttribute('data-allow')) this.jsFilter.string(activeElem); } @@ -188,47 +188,55 @@ class jsValidator { } // To Check the Value is less than min or not. if (activeElem.min) { - if (!jsRuleSet.constructor.min(activeElem)) { - log.push({ - 'el': activeElem, - 'type': 'min', - 'id': activeElem.name - }); - validElem = false; + if (jsRuleSet.constructor.isSet(activeElem)) { + if (!jsRuleSet.constructor.min(activeElem)) { + log.push({ + 'el': activeElem, + 'type': 'min', + 'id': activeElem.name + }); + validElem = false; + } } } // To Check the Value is grater than max or not. if (activeElem.max) { - if (!jsRuleSet.constructor.max(activeElem)) { - log.push({ - 'el': activeElem, - 'type': 'max', - 'id': activeElem.name - }); - validElem = false; + if (jsRuleSet.constructor.isSet(activeElem)) { + if (!jsRuleSet.constructor.max(activeElem)) { + log.push({ + 'el': activeElem, + 'type': 'max', + 'id': activeElem.name + }); + validElem = false; + } } } // To Check the Entered E-mail is Valid or Not. if (activeElem.type == "email") { - if (!jsRuleSet.constructor.email(activeElem)) { - log.push({ - 'el': activeElem, - 'type': 'email', - 'id': activeElem.name - }); - validElem = false; + if (jsRuleSet.constructor.isSet(activeElem)) { + if (!jsRuleSet.constructor.email(activeElem)) { + log.push({ + 'el': activeElem, + 'type': 'email', + 'id': activeElem.name + }); + validElem = false; + } } } // To Compare the Password is Same or Not with Re-Password. // TODO: Implement Simplified Comparison. if (activeElem.type == "password") { - if (!jsRuleSet.constructor.compare(activeElem)) { - log.push({ - 'el': activeElem, - 'type': 'password', - 'id': activeElem.name - }); - validElem = false; + if (jsRuleSet.constructor.isSet(activeElem)) { + if (!jsRuleSet.constructor.compare(activeElem)) { + log.push({ + 'el': activeElem, + 'type': 'password', + 'id': activeElem.name + }); + validElem = false; + } } } // If valid, then reset validation message. @@ -571,6 +579,7 @@ class jsRuleSets { static isSet(elem) { // If field is not required, then return "true". if (false === elem.required) return true; + let status = true; let value = elem.value; //TODO: Implement suitable solution for this. @@ -598,7 +607,7 @@ class jsRuleSets { let value = elem.value; let max = elem.max; //TODO: Implement suitable solution for this. - if (value > max) status = false; + if (value.length > max) status = false; return status; } @@ -606,17 +615,20 @@ class jsRuleSets { static email(elem) { // If field is not required, then return "true". if (false === elem.required) return true; - let status = true; + + let status = false; let email = elem.value; // To Validate Email. // Convert to Native String Format. email = email.toString(); // To Check it as String or Not. - if (!email) status = false; if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) { // Valid Email. status = true; } + + if (!email) status = false; + return status; } @@ -631,18 +643,26 @@ class jsRuleSets { // To Compare two Elements Values. static compare(elem1) { + let status = false; + // If field is not required, then return "true". - if (false === elem1.required) return true; + if (false === elem1.required) status = true; let elem2_id = elem1.getAttribute('data-check'); + if (typeof elem2_id == 'undefined' || elem2_id == null) status = false; + if (elem2_id === null) elem2_id = elem1.getAttribute('data-parent'); - elem2_id = elem2_id.toString(); + if (elem2_id === null) { + status = false; + } else { + elem2_id = elem2_id.toString(); - let elem2 = document.getElementById(elem2_id); + let elem2 = document.getElementById(elem2_id); + + if (elem1.value === elem2.value) status = true; + } - let status = true; - if (elem1.value !== elem2.value) status = false; jsLogger.out('Compare Status', status); return status; } @@ -811,7 +831,7 @@ let validationResponse = { elementDefaultResponse = this.template(activeElem, errorType); let spanTag = document.getElementById(activeElem.id); - jsLogger.out('Element Hit', errorType); + // jsLogger.out('Element Hit', errorType); // Create new response Message SPAN. if (typeof(spanTag) === 'undefined' || spanTag === null) { jsLogger.out('Element Found', false); @@ -821,9 +841,8 @@ let validationResponse = { } else { // Re-use Existing response Message SPAN. spanTag.innerHTML = elementDefaultResponse; - jsLogger.out('Element Found', true); } - jsLogger.out('Error Elem', activeElem.el); + // jsLogger.out('Error Elem', activeElem.el); // Append HTML response to the Element. activeElem.el.parentNode.insertBefore(spanTag, activeElem.el.nextSibling); } diff --git a/src/js/validatorNew.js b/src/js/validatorNew.js index 85d7783..c5d57dc 100644 --- a/src/js/validatorNew.js +++ b/src/js/validatorNew.js @@ -167,7 +167,7 @@ var jsValidator = { // Apply filter for Email elements. if (activeElem.type == 'email') jsFilter.email(activeElem); // Apply filter for Numeric elements. - if (activeElem.min || activeElem.max) jsFilter.limit(activeElem); + // if (activeElem.min || activeElem.max) jsFilter.limit(activeElem); // Apply filter with string, alphaNumeric and pregMatch. if (activeElem.getAttribute('data-allow')) jsFilter.string(activeElem); }, @@ -181,47 +181,55 @@ var jsValidator = { } // To Check the Value is less than min or not. if (activeElem.min) { - if (!jsRuleSets.min(activeElem)) { - log.push({ - 'el': activeElem, - 'type': 'min', - 'id': activeElem.name - }); - validElem = false; + if (jsRuleSets.isSet(activeElem)) { + if (!jsRuleSets.min(activeElem)) { + log.push({ + 'el': activeElem, + 'type': 'min', + 'id': activeElem.name + }); + validElem = false; + } } } // To Check the Value is grater than max or not. if (activeElem.max) { - if (!jsRuleSets.max(activeElem)) { - log.push({ - 'el': activeElem, - 'type': 'max', - 'id': activeElem.name - }); - validElem = false; + if (jsRuleSets.isSet(activeElem)) { + if (!jsRuleSets.max(activeElem)) { + log.push({ + 'el': activeElem, + 'type': 'max', + 'id': activeElem.name + }); + validElem = false; + } } } // To Check the Entered E-mail is Valid or Not. if (activeElem.type == "email") { - if (!jsRuleSets.email(activeElem)) { - log.push({ - 'el': activeElem, - 'type': 'email', - 'id': activeElem.name - }); - validElem = false; + if (jsRuleSets.isSet(activeElem)) { + if (!jsRuleSets.email(activeElem)) { + log.push({ + 'el': activeElem, + 'type': 'email', + 'id': activeElem.name + }); + validElem = false; + } } } // To Compare the Password is Same or Not with Re-Password. // TODO: Implement Simplified Comparison. if (activeElem.type == "password") { - if (!jsRuleSets.compare(activeElem)) { - log.push({ - 'el': activeElem, - 'type': 'password', - 'id': activeElem.name - }); - validElem = false; + if (jsRuleSets.isSet(activeElem)) { + if (!jsRuleSets.compare(activeElem)) { + log.push({ + 'el': activeElem, + 'type': 'password', + 'id': activeElem.name + }); + validElem = false; + } } } // If valid, then reset validation message. @@ -557,17 +565,20 @@ var jsRuleSets = { email: function (elem) { // If field is not required, then return "true". if (false === elem.required) return true; - var status = true; + + var status = false; var email = elem.value; // To Validate Email. // Convert to Native String Format. email = email.toString(); // To Check it as String or Not. - if (!email) status = false; if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) { // Valid Email. status = true; } + + if (!email) status = false; + return status; }, // To Check Element Phone Value is Valid or Not. @@ -580,17 +591,26 @@ var jsRuleSets = { }, // To Compare two Elements Values. compare: function (elem1) { + var status = false; + // If field is not required, then return "true". - if (false === elem1.required) return true; + if (false === elem1.required) status = true; + var elem2_id = elem1.getAttribute('data-check'); - if (elem2_id == null) elem2_id = elem1.getAttribute('data-parent'); - elem2_id = elem2_id.toString(); + if (typeof elem2_id == 'undefined' || elem2_id == null) status = false; + + if (elem2_id === null) elem2_id = elem1.getAttribute('data-parent'); + if (elem2_id === null) { + status = false; + } else { + elem2_id = elem2_id.toString(); - var elem2 = document.getElementById(elem2_id); + var elem2 = document.getElementById(elem2_id); + + if (elem1.value === elem2.value) status = true; + } - var status = true; - if (elem1.value !== elem2.value) status = false; jsLogger.out('Compare Status', status); return status; }