From 58d862870033aa276067ca554087ef28c939216d Mon Sep 17 00:00:00 2001 From: shankar Date: Thu, 4 May 2017 08:32:09 +0530 Subject: [PATCH 1/3] - Custom Validation Messages [ES6] --- src/demo/index2.html | 47 ++++++++++++++++++++++++++------------ src/js/validatorNew.es6.js | 45 +++++++++++++++++++++++++++++++----- 2 files changed, 71 insertions(+), 21 deletions(-) diff --git a/src/demo/index2.html b/src/demo/index2.html index c4f67be..ad6a0e5 100644 --- a/src/demo/index2.html +++ b/src/demo/index2.html @@ -8,16 +8,20 @@
- - + +
- - + +
- - + + +
+
+ +
@@ -25,20 +29,33 @@
- - + + \ No newline at end of file diff --git a/src/js/validatorNew.es6.js b/src/js/validatorNew.es6.js index c307592..ad86e0d 100644 --- a/src/js/validatorNew.es6.js +++ b/src/js/validatorNew.es6.js @@ -136,7 +136,7 @@ class jsValidator { } } } - if (false == this.initialLoad) validationResponse.init(errorList); + if (false == this.initialLoad) validationResponse.init(errorList, this.option); this.initialLoad = false; @@ -775,7 +775,8 @@ let pattern = { let validationResponse = { // Initiating the Response handler. - init: function (errorList) { + init: function (errorList, option) { + this.errorMessage = option.message; // let errorElements = option.errorElem; jsLogger.out('Errors', errorList); this.input(errorList.input); @@ -796,19 +797,29 @@ let validationResponse = { }, // To process all handlers. process: function (elem) { + var elementDefaultResponse = ''; for (let i in elem) { // jsLogger.out('Element', document.getElementById(elem[i].id)); if (elem[i].el && true === elem[i].el.required) { + // Manage active element. let activeElem = elem[i]; + let errorType = elem[i].type; + errorType = this.errorMessage[errorType]; + + // Fetch from Element's direct message. + elementDefaultResponse = this.template(activeElem, errorType); + let spanTag = document.getElementById(activeElem.id); - jsLogger.out('Element Hit', activeElem.type); + jsLogger.out('Element Hit', errorType); + // Create new response Message SPAN. if (typeof(spanTag) === 'undefined' || spanTag === null) { jsLogger.out('Element Found', false); spanTag = document.createElement('span'); spanTag.setAttribute('id', activeElem.id); - spanTag.innerHTML = 'Error ' + activeElem.type + ' - ' + Math.random().toString(36).substring(7); + spanTag.innerHTML = elementDefaultResponse; } else { - spanTag.innerHTML = 'Error ' + activeElem.type + ' - ' + Math.random().toString(36).substring(7); + // Re-use Existing response Message SPAN. + spanTag.innerHTML = elementDefaultResponse; jsLogger.out('Element Found', true); } jsLogger.out('Error Elem', activeElem.el); @@ -818,7 +829,29 @@ let validationResponse = { } }, // Perform template creation and update. - template: function () { + template: function (activeElem, errorType) { + let elementDefaultResponse = ''; + let errorIndex = ''; + let activeError = ''; + activeElem.el.getAttribute('data-message'); + if (!elementDefaultResponse || elementDefaultResponse == '') { + if (errorType) { + activeError = errorType; + // If error type is Min or Max, then it will proceed responsive. + if (activeElem.type == 'min' || activeElem.type == 'max') { + + if ('min' == activeElem.type) errorIndex = activeElem.el.min; + if ('max' == activeElem.type) errorIndex = activeElem.el.max; + + activeError = activeError.replace('[INDEX]', errorIndex); + + } + elementDefaultResponse = activeError; + } else { + elementDefaultResponse = 'Error ' + errorType + ' - ' + Math.random().toString(36).substring(7); + } + } + return elementDefaultResponse; } }; \ No newline at end of file From 3bb616a47270504949b8bc015c9ac8944bd9e51f Mon Sep 17 00:00:00 2001 From: shankar Date: Thu, 4 May 2017 08:33:37 +0530 Subject: [PATCH 2/3] - Custom Validation Messages [Core] Under Processing. --- src/js/validatorNew.js | 59 +++++++++++++++++++++++++++++++++--------- 1 file changed, 47 insertions(+), 12 deletions(-) diff --git a/src/js/validatorNew.js b/src/js/validatorNew.js index f6968d9..1cf429b 100644 --- a/src/js/validatorNew.js +++ b/src/js/validatorNew.js @@ -129,7 +129,7 @@ var jsValidator = { } } - if (false == this.initialLoad) validationResponse.init(errorList); + if (false == this.initialLoad) validationResponse.init(errorList, this.option); this.initialLoad = false; @@ -479,8 +479,8 @@ var jsForm = { }, // To set fields are required. required: function () { - // let jsField = new jsField().init(this.options); - let forceFilter = this.forceFilter; + // var jsField = new jsField().init(this.options); + var forceFilter = this.forceFilter; // Filter all required "input" elements. this.input = jsField.required(this.input, forceFilter); // Filter all required "select" elements. @@ -539,7 +539,7 @@ var jsRuleSets = { var value = elem.value; var min = elem.min; //TODO: Implement suitable solution for this. - if (value < min) status = false; + if (value.length < min && value.length != 0) status = false; return status; }, // To Check Element with Max Condition. @@ -550,7 +550,7 @@ var jsRuleSets = { var value = elem.value; var max = elem.max; //TODO: Implement suitable solution for this. - if (value > max) status = false; + if (value.length > max && value.length != 0) status = false; return status; }, // To Check Element Email is Valid or Not. @@ -716,8 +716,9 @@ var pattern = { var validationResponse = { // Initiating the Response handler. - init: function (errorList) { - // let errorElements = option.errorElem; + init: function (errorList, option) { + this.errorMessage = option.message; + // var errorElements = option.errorElem; jsLogger.out('Errors', errorList); this.input(errorList.input); this.select(errorList.select); @@ -737,19 +738,31 @@ var validationResponse = { }, // To process all handlers. process: function (elem) { - for (let i in elem) { + var elementDefaultResponse = ''; + var errorType; + for (var i in elem) { // jsLogger.out('Element', document.getElementById(elem[i].id)); if (elem[i].el && true === elem[i].el.required) { + // Manage active element. var activeElem = elem[i]; + var errorType = elem[i].type; + errorType = this.errorMessage[errorType]; + + + // Fetch from Element's direct message. + elementDefaultResponse = this.template(activeElem, errorType); + var spanTag = document.getElementById(activeElem.id); - jsLogger.out('Element Hit', activeElem.type); + jsLogger.out('Element Hit', errorType); + // Create new response Message SPAN. if (typeof(spanTag) === 'undefined' || spanTag === null) { jsLogger.out('Element Found', false); spanTag = document.createElement('span'); spanTag.setAttribute('id', activeElem.id); - spanTag.innerHTML = 'Error ' + activeElem.type + ' - ' + Math.random().toString(36).substring(7); + spanTag.innerHTML = elementDefaultResponse; } else { - spanTag.innerHTML = 'Error ' + activeElem.type + ' - ' + Math.random().toString(36).substring(7); + // Re-use Existing response Message SPAN. + spanTag.innerHTML = elementDefaultResponse; jsLogger.out('Element Found', true); } jsLogger.out('Error Elem', activeElem.el); @@ -759,7 +772,29 @@ var validationResponse = { } }, // Perform template creation and update. - template: function () { + template: function (activeElem, errorType) { + var elementDefaultResponse = ''; + var errorIndex = ''; + var activeError = ''; + activeElem.el.getAttribute('data-message'); + if (!elementDefaultResponse || elementDefaultResponse == '') { + if (errorType) { + activeError = errorType; + // If error type is Min or Max, then it will proceed responsive. + if (activeElem.type == 'min' || activeElem.type == 'max') { + + if ('min' == activeElem.type) errorIndex = activeElem.el.min; + if ('max' == activeElem.type) errorIndex = activeElem.el.max; + + activeError = activeError.replace('[INDEX]', errorIndex); + } + + elementDefaultResponse = activeError; + } else { + elementDefaultResponse = 'Error ' + errorType + ' - ' + Math.random().toString(36).substring(7); + } + } + return elementDefaultResponse; } }; \ No newline at end of file From be524a0c29bd889c5fb73cb41a162852387f37ea Mon Sep 17 00:00:00 2001 From: shankarThiyagaraajan Date: Thu, 4 May 2017 15:49:20 +0530 Subject: [PATCH 3/3] - Two way validation message injection implemented [Core & ES6]. --- src/demo/index2.html | 44 ++++++++++++++++++++------------------ src/js/validatorNew.es6.js | 20 +++++++++++------ src/js/validatorNew.js | 22 ++++++++++++------- 3 files changed, 51 insertions(+), 35 deletions(-) diff --git a/src/demo/index2.html b/src/demo/index2.html index ad6a0e5..657b1db 100644 --- a/src/demo/index2.html +++ b/src/demo/index2.html @@ -13,7 +13,8 @@
- +
@@ -31,30 +32,31 @@ + diff --git a/src/js/validatorNew.es6.js b/src/js/validatorNew.es6.js index ad86e0d..29ca59b 100644 --- a/src/js/validatorNew.es6.js +++ b/src/js/validatorNew.es6.js @@ -184,7 +184,7 @@ class jsValidator { let validElem = true; // To Generally checks, the field is empty or not. if (!jsRuleSets.isSet(activeElem)) { - log.push({'el': activeElem, 'type': 'empty', 'id': activeElem.name}); + log.push({'el': activeElem, 'type': 'required', 'id': activeElem.name}); } // To Check the Value is less than min or not. if (activeElem.min) { @@ -804,6 +804,7 @@ let validationResponse = { // Manage active element. let activeElem = elem[i]; let errorType = elem[i].type; + errorType = this.errorMessage[errorType]; // Fetch from Element's direct message. @@ -833,8 +834,9 @@ let validationResponse = { let elementDefaultResponse = ''; let errorIndex = ''; let activeError = ''; - activeElem.el.getAttribute('data-message'); - if (!elementDefaultResponse || elementDefaultResponse == '') { + activeError = activeElem.el.getAttribute('data-message'); + + if (!activeError || activeError == '') { if (errorType) { activeError = errorType; // If error type is Min or Max, then it will proceed responsive. @@ -844,14 +846,20 @@ let validationResponse = { if ('max' == activeElem.type) errorIndex = activeElem.el.max; activeError = activeError.replace('[INDEX]', errorIndex); - } - elementDefaultResponse = activeError; } else { - elementDefaultResponse = 'Error ' + errorType + ' - ' + Math.random().toString(36).substring(7); + console.log('error type'); + console.log(errorType); + console.log(this.errorMessage); + if (this.errorMessage[errorType]) { + activeError = this.errorMessage[errorType]; + } else { + activeError = 'Error ' + errorType + ' - ' + Math.random().toString(36).substring(7); + } } } + elementDefaultResponse = activeError; return elementDefaultResponse; } }; \ No newline at end of file diff --git a/src/js/validatorNew.js b/src/js/validatorNew.js index 1cf429b..85d7783 100644 --- a/src/js/validatorNew.js +++ b/src/js/validatorNew.js @@ -177,7 +177,7 @@ var jsValidator = { var validElem = true; // To Generally checks, the field is empty or not. if (!jsRuleSets.isSet(activeElem)) { - log.push({'el': activeElem, 'type': 'empty', 'id': activeElem.name}); + log.push({'el': activeElem, 'type': 'required', 'id': activeElem.name}); } // To Check the Value is less than min or not. if (activeElem.min) { @@ -739,15 +739,14 @@ var validationResponse = { // To process all handlers. process: function (elem) { var elementDefaultResponse = ''; - var errorType; for (var i in elem) { // jsLogger.out('Element', document.getElementById(elem[i].id)); if (elem[i].el && true === elem[i].el.required) { // Manage active element. var activeElem = elem[i]; var errorType = elem[i].type; - errorType = this.errorMessage[errorType]; + errorType = this.errorMessage[errorType]; // Fetch from Element's direct message. elementDefaultResponse = this.template(activeElem, errorType); @@ -776,8 +775,9 @@ var validationResponse = { var elementDefaultResponse = ''; var errorIndex = ''; var activeError = ''; - activeElem.el.getAttribute('data-message'); - if (!elementDefaultResponse || elementDefaultResponse == '') { + activeError = activeElem.el.getAttribute('data-message'); + + if (!activeError || activeError == '') { if (errorType) { activeError = errorType; // If error type is Min or Max, then it will proceed responsive. @@ -787,14 +787,20 @@ var validationResponse = { if ('max' == activeElem.type) errorIndex = activeElem.el.max; activeError = activeError.replace('[INDEX]', errorIndex); - } - elementDefaultResponse = activeError; } else { - elementDefaultResponse = 'Error ' + errorType + ' - ' + Math.random().toString(36).substring(7); + console.log('error type'); + console.log(errorType); + console.log(this.errorMessage); + if (this.errorMessage[errorType]) { + activeError = this.errorMessage[errorType]; + } else { + activeError = 'Error ' + errorType + ' - ' + Math.random().toString(36).substring(7); + } } } + elementDefaultResponse = activeError; return elementDefaultResponse; } }; \ No newline at end of file