From 4ef1391fe26513871a609e6c5d0dc16c00e1456d Mon Sep 17 00:00:00 2001 From: shankar Date: Fri, 19 May 2017 18:39:41 +0530 Subject: [PATCH 1/5] Dev Comments. --- src/js/formValidator.es6.js | 3 +++ src/js/formValidator.js | 3 +++ 2 files changed, 6 insertions(+) diff --git a/src/js/formValidator.es6.js b/src/js/formValidator.es6.js index 7712730..2d89148 100644 --- a/src/js/formValidator.es6.js +++ b/src/js/formValidator.es6.js @@ -976,6 +976,9 @@ let validationResponse = { } return elementDefaultResponse; }, + /* Default error handling messages. + If user not specify the messages, + then it will be replaces. */ default: function (errorType) { let errorMessages = { diff --git a/src/js/formValidator.js b/src/js/formValidator.js index 5689689..f580a39 100644 --- a/src/js/formValidator.js +++ b/src/js/formValidator.js @@ -845,6 +845,9 @@ var validationResponse = { } return elementDefaultResponse; }, + /* Default error handling messages. + If user not specify the messages, + then it will be replaces. */ default: function (errorType) { var errorMessages = { required: 'This field is required', From abe62aa8c47030aab619d74a978390dc74ca2c3e Mon Sep 17 00:00:00 2001 From: shankar Date: Fri, 19 May 2017 19:26:34 +0530 Subject: [PATCH 2/5] Dev Comments. --- src/js/formValidator.es6.js | 321 ++++++++++++++++++++++++------------ src/js/formValidator.js | 219 +++++++++++++++++------- 2 files changed, 377 insertions(+), 163 deletions(-) diff --git a/src/js/formValidator.es6.js b/src/js/formValidator.es6.js index 2d89148..7a6f659 100644 --- a/src/js/formValidator.es6.js +++ b/src/js/formValidator.es6.js @@ -20,12 +20,14 @@ * Date: 2017-05-01 */ -/* +/** * For Managing overall Validation flow. */ class jsValidator { - + /* + * jsValidator's Constructor. + */ constructor() { // Holding form element data. this.formData = false; @@ -51,7 +53,9 @@ class jsValidator { this.onChange = false; } - // Initiating the Validator. + /* + * Initiating the Validator. + */ init(option) { this.jsFilter = new jsFilter(option.forceFilter); @@ -81,7 +85,9 @@ class jsValidator { return this; } - // To make listen on submit action of the form. + /* + * To make listen on submit action of the form. + */ submitListener(formID, obj) { // To off submit listener, if only filter needed. if (false === this.onlyFilter || typeof(this.onlyFilter) === 'undefined') { @@ -97,7 +103,9 @@ class jsValidator { } } - // To update the DOM to make action listener. + /* + * To update the DOM to make action listener. + */ update() { // To Update global options. let option = this.option; @@ -109,7 +117,9 @@ class jsValidator { this.jsFormError = new jsFormError().init(); } - // To checking all elements from registered form. + /* + * To checking all elements from registered form. + */ check() { // Loading JS Form. let jsFormObj = this.jsForm; @@ -150,7 +160,9 @@ class jsValidator { return status; } - // To looping all elements for actions. + /* + * To looping all elements for actions. + */ elemLoop(index, formElem) { // Initiate empty array for keep list of errors. let log = []; @@ -178,7 +190,9 @@ class jsValidator { return log; } - // To apply filter to all relevant elements by it's attributes. + /* + * To apply filter to all relevant elements by it's attributes. + */ applyFilters(activeElem) { // Apply filter for Number elements. if (activeElem.type == 'number') this.jsFilter.number(activeElem); @@ -192,13 +206,17 @@ class jsValidator { if (activeElem.getAttribute('pattern')) jsFilter.pattern(activeElem); } - // To make it active to listen changes of those error fields. + /* + * To make it active to listen changes of those error fields. + */ applyGlobalListener(element) { var current = this; element.addEventListener("change", current.constructor.quickValidation, false); } - // To perform quick validation to respond those fields. + /* + * To perform quick validation to respond those fields. + */ static quickValidation(event) { jsLogger.out('Quick', event); var log = []; @@ -209,22 +227,29 @@ class jsValidator { validationResponse.process(log); } - // Single step instance validator for Ajax form submissions. + /* + * Single step instance validator for Ajax form submissions. + */ validate() { // Initiate form Check. return this.check(); } } -/* +/** * Common Filter instances. */ class jsFilter { + /* + * jsFilter's Constructor. + */ constructor(forceFilter) { this.forceFilter = forceFilter; } - // Number elements filter listener. + /* + * Number elements filter listener. + */ number(element) { let current = this; let status = true; @@ -238,7 +263,9 @@ class jsFilter { } - // String elements filter listener. + /* + * String elements filter listener. + */ string(element) { // Getting "data" attribute for actions. let type = element.getAttribute('data-allow'); @@ -271,11 +298,11 @@ class jsFilter { if (true === status) element.addEventListener("keypress", current.constructor.isPatternValid, false); break; } - - } - // Pattern based filter and listener. + /* + * Pattern based filter and listener. + */ static pattern(element) { var current = this; @@ -291,13 +318,17 @@ class jsFilter { } - // Email elements filter listener. + /* + * Email elements filter listener. + */ static email(element) { //this.jsRuleSet = new jsRuleSets(); //element.addEventListener("keypress", this.jsRuleSet.constructor.email, false); } - // Numeric with Limited elements filter listener. + /* + * Numeric with Limited elements filter listener. + */ limit(element) { let status = true; if (false === this.forceFilter) { @@ -311,7 +342,9 @@ class jsFilter { } //TODO: fix live entry issue. - // Restrict element with it's limit. + /* + * Restrict element with it's limit. + */ static isInLimit(event) { let value = event.target.value; // To check is this action is from "windows" action or not. @@ -340,7 +373,9 @@ class jsFilter { event.target.value = (event.target.value > max) ? max : event.target.value; } - // Only allow alpha([a-zA-Z]). + /* + * Only allow alpha([a-zA-Z]). + */ static isAlpha(event) { // To check is this action is from "windows" action or not. if (true === helper.isWindowAction(event)) return true; @@ -350,7 +385,9 @@ class jsFilter { if (false === status) event.preventDefault(); } - // Only allow alpha([a-zA-Z0-9]). + /* + * Only allow alpha([a-zA-Z0-9]). + */ static isAlphaNumeric(event) { // To check is this action is from "windows" action or not. if (true === helper.isWindowAction(event)) return true; @@ -360,6 +397,9 @@ class jsFilter { if (false === status) event.preventDefault(); } + /* + * To check password is valid or not. + */ static isValidPassword(event) { // Prevent using "space". let charCode = (event.which) ? event.which : event.keyCode; @@ -375,7 +415,9 @@ class jsFilter { if (false === status) event.preventDefault(); } - // Only allow by pattern(ex. ^[a-zA-Z0-3@#$!_.]+$). + /* + * Only allow by pattern(ex. ^[a-zA-Z0-3@#$!_.]+$). + */ static isPatternValid(event) { // To check is this action is from "windows" action or not. if (true === helper.isWindowAction(event)) return true; @@ -385,7 +427,9 @@ class jsFilter { if (false === status) event.preventDefault(); } - // Check is numeric or not. + /* + * Check is numeric or not. + */ static isNumberKey(event) { // To check is this action is from "windows" action or not. if (true === helper.isWindowAction(event)) return true; @@ -404,6 +448,9 @@ class jsFilter { * To Update overall JsValidator Settings. */ class jsSettings { + /* + * jsSetting's Constructor. + */ constructor() { // Common error message color for form validation. this.errorColor = false; @@ -411,7 +458,9 @@ class jsSettings { this.errorTemplate = false; } - // To Initiate the Configurations. + /* + * To Initiate the Configurations. + */ init(option) { // To update error message color to global object. this.errorColor = option.errorColor; @@ -421,6 +470,9 @@ class jsSettings { return this; } + /* + * General Log. + */ log() { jsLogger.out(this.errorColor); jsLogger.out(this.followedElement); @@ -432,6 +484,9 @@ class jsSettings { * To Perform all Form based Operations. */ class jsForm { + /* + * jsForm's Constructor. + */ constructor() { this.options = false; // Form element. @@ -450,7 +505,9 @@ class jsForm { this.forceFilter = false; } - // To Initiating the "jsForm". + /* + * To Initiating the "jsForm". + */ init(option) { // jsLogger.out('Form', option.form); // Update Global Option. @@ -467,7 +524,9 @@ class jsForm { return this; } - // To Register Active Form to Global Object. + /* + * To Register Active Form to Global Object. + */ registerForm(form) { // validate and Update Log. if (typeof form === 'undefined') jsLogger.out('Form Identification', 'Form Identification is Missing !'); @@ -482,7 +541,9 @@ class jsForm { this.formCore = form; } - // To Parse all Relative Form components. + /* + * To Parse all Relative Form components. + */ parseForm(form) { // Form should not be an ID. @@ -498,7 +559,9 @@ class jsForm { this.label = form.getElementsByTagName('label'); } - // To set fields are required. + /* + * To set fields are required. + */ required() { // let jsField = new jsField().init(this.options); let forceFilter = this.forceFilter; @@ -510,6 +573,9 @@ class jsForm { this.textArea = jsField.required(this.textArea, forceFilter); } + /* + * General Log. + */ log() { jsLogger.out('Form', this.form); jsLogger.out('input', this.input); @@ -524,15 +590,23 @@ class jsForm { */ class jsField { + /* + * jsField's Constructor. + */ constructor() { this.forceFilter = false; } + /* + * To Initializing jsField. + */ init(option) { this.forceFilter = option.forceFilter; } - // Return all required elements list. + /* + * Return all required elements list. + */ static required(field, forceFilter) { let requiredFieldsList = []; for (let i = 0; i < field.length; i++) { @@ -552,11 +626,16 @@ class jsField { * List of Validation Rules. */ class jsRuleSets { + /* + * jsRuleSets's Constructor. + */ constructor() { } - // To start validation process. + /* + * To start validation process. + */ static checkValidation(activeElem, log) { let validElem = true; let firstErrorHit = false; @@ -630,7 +709,7 @@ class jsRuleSets { if (true === validElem) { jsLogger.out('Valid Elem', activeElem); if (activeElem.name !== '') { - var elem = document.getElementById(activeElem.name + '_new1_1_1xv_resp'); + let elem = document.getElementById(activeElem.name + '_new1_1_1xv_resp'); if (typeof (elem) !== 'undefined' && elem !== null) { elem.innerHTML = ''; } @@ -644,7 +723,9 @@ class jsRuleSets { return log; } - // To Check, whether the element have value or not. + /* + * To Check, whether the element have value or not. + */ static isSet(elem) { // If field is not required, then return "true". if (false === elem.required) return true; @@ -655,7 +736,9 @@ class jsRuleSets { return status; } - // To Check Element with Min Condition. + /* + * To Check Element with Min Condition. + */ static min(elem) { // If field is not required, then return "true". if (false === elem.required) return true; @@ -667,7 +750,9 @@ class jsRuleSets { return status; } - // To Check Element with Max Condition. + /* + * To Check Element with Max Condition. + */ static max(elem) { // If field is not required, then return "true". if (false === elem.required) return true; @@ -679,13 +764,15 @@ class jsRuleSets { return status; } - // To Check Element Email is Valid or Not. + /* + * To Check Element Email is Valid or Not. + */ static email(elem) { // If field is not required, then return "true". if (false === elem.required) return true; - var status = false; - var email = elem.value; + let status = false; + let email = elem.value; // To Validate Email. // Convert to Native String Format. email = email.toString(); @@ -700,7 +787,9 @@ class jsRuleSets { return status; } - // To Check Element Phone Value is Valid or Not. + /* + * To Check Element Phone Value is Valid or Not. + */ static phone(elem, pattern) { // If field is not required, then return "true". if (false === elem.required) return true; @@ -709,7 +798,9 @@ class jsRuleSets { return status; } - // To Compare two Elements Values. + /* + * To Compare two Elements Values. + */ static compare(elem1) { let status = false; @@ -741,6 +832,9 @@ class jsRuleSets { * To Manage JsValidator Errors. */ class jsFormError { + /* + * jsFormError's constructor. + */ constructor() { // Global constant to specify, error happened or not. this.errorHit = false; @@ -750,7 +844,9 @@ class jsFormError { this.successCss = false; } - // Initiate overall form error handler. + /* + * Initiate overall form error handler. + */ init() { this.errorHit = false; this.errorCss = 'border-color: red;border-radius: 5px;color: red;'; @@ -758,12 +854,16 @@ class jsFormError { } - // Form error log. + /* + * Form error log. + */ log() { // jsLogger.out('Form Error Hit', this.errorHit); } - // Form error style. + /* + * Form error style. + */ style(css) { this.errorCss = css.error; this.successCss = css.success; @@ -772,34 +872,37 @@ class jsFormError { /** * For manage overall logging with validator. - * */ let jsLogger = { - - // Simple log with "heading" and "message". + /* + * Simple log with "heading" and "message". + */ out: function (heading, message) { console.log('======' + heading + '======'); console.log(message); console.log('------------------------'); }, - - // For bulk data logging. + /* + * For bulk data logging. + */ bulk: function (data) { console.log(data); }, - - // For log data with table. + /* + * For log data with table. + */ table: function (data) { console.table(data); } }; - +/** + * General Helping methods. + */ let helper = { /* * To check the keyboard action is window action or not. */ isWindowAction: function (event) { - // Getting the event to be triggered. let theEvent = event || window.event; // Getting the type of event or code. @@ -808,51 +911,51 @@ let helper = { // Tab, Space, Home, End, Up, Down, Left, Right... if (key === 9 || key === 0 || key === 8 || key === 32 || key === 13 || key === 8 || (key >= 35 && key <= 40)) { return true; - } + } // If not in list then check return with corresponding data. - // If not in list then check return with corresponding data. key = String.fromCharCode(key); // Return also if length is 0. if (key.length === 0) return true; - // Finally return "false" for general keys. return false; }, - // To Scroll Up / Down to notify the item that have validation message. + /* + * To Scroll Up / Down to notify the item that have validation message. + */ scrollToItem: function (item) { + // alert(item); location.href = '#' + item; - // // Update by Tag Name. - // let elem_name = item.nodeName; + // // Update by Tag Name. + // let elem_name = item.nodeName; + // // If Element is not valid, then return false. + // if (!elem_name) return false; + // if (null == elem_name) return false; + // // Re-Fetching elements by its Name. + // item = document.getElementsByName(elem_name); // - // // If Element is not valid, then return false. - // if (!elem_name) return false; - // if (null == elem_name) return false; - // item = document.getElementsByName(elem_name); - // - // - // var diff = (item.offsetTop - window.scrollY) / 20; - // if (!window._lastDiff) { - // window._lastDiff = 0; - // } - // if (Math.abs(diff) > 2) { - // window.scrollTo(0, (window.scrollY + diff)); - // clearTimeout(window._TO); - // if (diff !== window._lastDiff) { - // window._lastDiff = diff; - // window._TO = setTimeout(this.scrollToItem, 100, item); - // } - // } else { - // window.scrollTo(0, item.offsetTop) + // let diff = (item.offsetTop - window.scrollY) / 20; + // if (!window._lastDiff) { + // window._lastDiff = 0; + // } + // if (Math.abs(diff) > 2) { + // window.scrollTo(0, (window.scrollY + diff)); + // clearTimeout(window._TO); + // if (diff !== window._lastDiff) { + // window._lastDiff = diff; + // window._TO = setTimeout(this.scrollToItem, 100, item); // } + // } else { + // window.scrollTo(0, item.offsetTop) + // } } }; - /** * Simple library for Pattern. */ let pattern = { - - // To generate pattern from element attribute. + /* + * To generate pattern from element attribute. + */ getDefault: function (event, originalPattern) { if (typeof originalPattern == 'undefined') originalPattern = ''; // Getting special characters list. @@ -864,7 +967,6 @@ let pattern = { if (!allow_special && allow_special === null) allow_special = ''; // Format to string. allow_special = allow_special.toString(); - if (pattern !== '' && pattern.length > 0 && pattern !== null) { defaultPattern = pattern; } else { @@ -872,7 +974,9 @@ let pattern = { } return defaultPattern; }, - // To validate event with the pattern. + /* + * To validate event with the pattern. + */ validate: function (event, pattern) { // Managing the Pattern. let defaultPattern = this.getDefault(event, pattern); @@ -883,13 +987,13 @@ let pattern = { return regex.test(key); } }; - -/* +/** * To Manage all kind of error response. */ let validationResponse = { - - // Initiating the Response handler. + /* + * Initiating the Response handler. + */ init: function (errorList, option) { this.errorMessage = option.message; // let errorElements = option.errorElem; @@ -898,19 +1002,27 @@ let validationResponse = { this.select(errorList.select); this.textArea(errorList.textArea); }, - // To handle the "input" element. + /* + * To handle the "input" element. + */ input: function (elem) { this.process(elem); }, - // To handle the "select" element. + /* + * To handle the "select" element. + */ select: function (elem) { this.process(elem); }, - // To handle the "textArea" element. + /* + * To handle the "textArea" element. + */ textArea: function (elem) { this.process(elem); }, - // To process all handlers. + /* + * To process all handlers. + */ process: function (elem) { let elementDefaultResponse = ''; for (let i in elem) { @@ -919,14 +1031,12 @@ let validationResponse = { // Manage active element. let activeElem = elem[i]; let errorType = elem[i].type; - // Fetch from Element's direct message. elementDefaultResponse = this.template(activeElem, errorType); - let spanTag = document.getElementById(activeElem.id); // jsLogger.out('Element Hit', errorType); // Create new response Message SPAN. - if (typeof(spanTag) === 'undefined' || spanTag === null) { + if (typeof spanTag === 'undefined' || spanTag === 'undefined' || spanTag === null) { // jsLogger.out('Element Found', false); spanTag = document.createElement('span'); spanTag.setAttribute('id', activeElem.id); @@ -935,37 +1045,33 @@ let validationResponse = { // 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); } } }, - // Perform template creation and update. + /* + * Perform template creation and update. + */ template: function (activeElem, errorType) { jsLogger.out('error Type 0', errorType); let errorIndex = ''; let activeError = ''; let elementDefaultResponse = activeElem.el.getAttribute('data-message'); - if (typeof elementDefaultResponse === 'undefined' || elementDefaultResponse === '' || elementDefaultResponse === null) { - // Sanity check with error message object. if (typeof this.errorMessage !== 'undefined' && typeof this.errorMessage[errorType] !== 'undefined') { - errorType = this.errorMessage[errorType]; - activeElem.el.getAttribute('data-message'); if (errorType) { jsLogger.out('errorType', 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); } } @@ -976,11 +1082,12 @@ let validationResponse = { } return elementDefaultResponse; }, - /* Default error handling messages. - If user not specify the messages, - then it will be replaces. */ + /* + * Default error handling messages. + * If user not specify the messages, + * then it will be replaces. + */ default: function (errorType) { - let errorMessages = { required: 'This field is required', min: 'This field length is too low.', @@ -989,7 +1096,7 @@ let validationResponse = { email: 'Email is not valid' }; if (typeof errorType !== 'string') return false; - if (typeof errorMessages[errorType] === 'undefined') return false; + if (typeof errorMessages[errorType] === 'undefined') return false; return errorMessages[errorType]; } }; diff --git a/src/js/formValidator.js b/src/js/formValidator.js index f580a39..6c69f29 100644 --- a/src/js/formValidator.js +++ b/src/js/formValidator.js @@ -23,6 +23,9 @@ * For Managing overall Validation flow. */ var firstErrorHit = false; +/** + * Core Js Validator. + */ var jsValidator = { // Holding form element data. formData: false, @@ -44,7 +47,9 @@ var jsValidator = { option: false, // To apply global validator. onChange: false, - // Initiating the Validator. + /* + * Initiating the Validator. + */ init: function (option) { jsLogger.table(option); // To Update global options. @@ -68,7 +73,9 @@ var jsValidator = { // Send back "this". return this; }, - // To make listen on submit action of the form. + /* + * To make listen on submit action of the form. + */ submitListener: function (formID, obj) { // To off submit listener, if only filter needed. if (false === this.onlyFilter || typeof (this.onlyFilter) === 'undefined') { @@ -83,7 +90,9 @@ var jsValidator = { }); } }, - // To Refresh the DOM and enable Dynamic-Elements to Access. + /* + * To Refresh the DOM and enable Dynamic-Elements to Access. + */ update: function () { var option = this.option; // Updating the filter flag to global. @@ -95,7 +104,9 @@ var jsValidator = { // Initiate form error setup. this.jsFormError = jsFormError.init(); }, - // To checking all elements from registered form. + /* + * To checking all elements from registered form. + */ check: function () { var status = false; // Loading JS Form. @@ -129,7 +140,9 @@ var jsValidator = { this.initialLoad = false; return status; }, - // To looping all elements for actions. + /* + * To looping all elements for actions. + */ elemLoop: function (index, formElem) { // Initiate empty array for keep list of errors. var log = []; @@ -158,7 +171,9 @@ var jsValidator = { jsLogger.out('Log', log); return log; }, - // To apply filter to all relevant elements by it's attributes. + /* + * To apply filter to all relevant elements by it's attributes. + */ applyFilters: function (activeElem) { // Apply filter for Number elements. if (activeElem.type == 'number') jsFilter.number(activeElem); @@ -171,11 +186,15 @@ var jsValidator = { // Apply filter with pattern. if (activeElem.getAttribute('pattern')) jsFilter.pattern(activeElem); }, - // To make it active to listen changes of those error fields. + /* + * To make it active to listen changes of those error fields. + */ applyGlobalListener: function (element) { element.addEventListener('change', this.quickValidation, false); }, - // To perform quick validation to respond those fields. + /* + * To perform quick validation to respond those fields. + */ quickValidation: function (event) { jsLogger.out('Quick', event); var log = []; @@ -184,13 +203,15 @@ var jsValidator = { jsLogger.out('Quick Out', log); validationResponse.process(log); }, - // Single step instance validator for Ajax form submissions. + /* + * Single step instance validator for Ajax form submissions. + */ validate: function () { // Initiate form Check. return this.check(); } }; -/* +/** * Common Filter instances. */ var jsFilter = { @@ -205,7 +226,9 @@ var jsFilter = { } if (true === status) element.addEventListener('keypress', this.isNumberKey, false); }, - // String elements filter listener. + /* + * String elements filter listener. + */ string: function (element) { // Getting "data" attribute for actions. var type = element.getAttribute('data-allow'); @@ -233,7 +256,9 @@ var jsFilter = { break; } }, - // Pattern based filter and listener. + /* + * Pattern based filter and listener. + */ pattern: function (element) { var current = this; var status = true; @@ -245,7 +270,9 @@ var jsFilter = { } if (true === status) element.addEventListener('keypress', current.isPatternValid, false); }, - // Email elements filter listener. + /* + * Email elements filter listener. + */ email: function (element) { var status = true; if (false === this.forceFilter) { @@ -256,7 +283,9 @@ var jsFilter = { } if (true === status) element.addEventListener('keypress', jsRuleSets.email, false); }, - // Numeric with Limited elements filter listener. + /* + * Numeric with Limited elements filter listener. + */ limit: function (element) { var status = true; if (false === this.forceFilter) { @@ -267,7 +296,9 @@ var jsFilter = { } if (true === status) element.addEventListener('keypress', this.isInLimit, false); }, - // Restrict element with it's limit. + /* + * Restrict element with it's limit. + */ isInLimit: function (event) { var value = event.target.value; // To check is this action is from "windows" action or not. @@ -290,7 +321,9 @@ var jsFilter = { } event.target.value = event.target.value.substring(0, event.target.value.length - 1); }, - // Only allow alpha([a-zA-Z]). + /* + * Only allow alpha([a-zA-Z]). + */ isAlpha: function (event) { // To check is this action is from "windows" action or not. if (true === helper.isWindowAction(event)) return true; @@ -299,7 +332,9 @@ var jsFilter = { // Return status of the Action. if (false === status) event.preventDefault(); }, - // Only allow alpha([a-zA-Z0-9]). + /* + * Only allow alpha([a-zA-Z0-9]). + */ isAlphaNumeric: function (event) { // To check is this action is from "windows" action or not. if (true === helper.isWindowAction(event)) return true; @@ -308,6 +343,9 @@ var jsFilter = { // Return status of the Action. if (false === status) event.preventDefault(); }, + /* + * To check password is valid or not. + */ isValidPassword: function (event) { // Prevent using "space". var charCode = (event.which) ? event.which : event.keyCode; @@ -323,7 +361,9 @@ var jsFilter = { // Return status of the Action. if (false === status) event.preventDefault(); }, - // Only allow by pattern(ex. ^[a-zA-Z0-3@#$!_.]+$). + /* + * Only allow by pattern(ex. ^[a-zA-Z0-3@#$!_.]+$). + */ isPatternValid: function (event) { // To check is this action is from "windows" action or not. if (true === helper.isWindowAction(event)) return true; @@ -332,7 +372,9 @@ var jsFilter = { // Return status of the Action. if (false === status) event.preventDefault(); }, - // Check is numeric or not. + /* + * Check is numeric or not. + */ isNumberKey: function (event) { // To check is this action is from "windows" action or not. if (true === helper.isWindowAction(event)) return true; @@ -354,7 +396,9 @@ var jsSettings = { errorColor: false, // Set common template for error message errorTemplate: false, - // To Initiate the Configurations. + /* + * To Initiate the Configurations. + */ init: function (option) { // To update error message color to global object. this.errorColor = option.errorColor; @@ -363,9 +407,11 @@ var jsSettings = { // Return "this" object. return this; }, + /* + * General Log. + */ log: function () { jsLogger.out(this.errorColor); - jsLogger.out(this.followedElement); jsLogger.out(this.errorTemplate); } }; @@ -387,7 +433,9 @@ var jsForm = { label: false, // Perform Force Filter on Elements. forceFilter: false, - // To Initiating the "jsForm". + /* + * To Initiating the "jsForm". + */ init: function (option) { jsLogger.out('Form', option.form); // Update Global Option. @@ -402,7 +450,9 @@ var jsForm = { this.required(); return this; }, - // To Register Active Form to Global Object. + /* + * To Register Active Form to Global Object. + */ registerForm: function (form) { // validate and Update Log. if (typeof form === 'undefined') jsLogger.out('Form Identification', 'Form Identification is Missing !'); @@ -414,7 +464,9 @@ var jsForm = { // Update Direct Form ID. this.formCore = form; }, - // To Parse all Relative Form components. + /* + * To Parse all Relative Form components. + */ parseForm: function (form) { if (form === null) return false; // "Input" elements like "text, date, time..." @@ -426,7 +478,9 @@ var jsForm = { // "Label" element. this.label = form.getElementsByTagName('label'); }, - // To set fields are required. + /* + * To set fields are required. + */ required: function () { // var jsField = new jsField().init(this.options); var forceFilter = this.forceFilter; @@ -437,6 +491,9 @@ var jsForm = { // Filter all required "textArea" elements. this.textArea = jsField.required(this.textArea, forceFilter); }, + /* + * General Log. + */ log: function () { jsLogger.out('Form', this.form); jsLogger.out('input', this.input); @@ -445,11 +502,13 @@ var jsForm = { jsLogger.out('labels', this.label); } }; -/* +/** * Perform Operations in Field level. */ var jsField = { - // Return all required elements list. + /* + * Return all required elements list. + */ required: function (field, forceFilter) { var requiredFieldsList = []; // Looping fields to filter. @@ -468,7 +527,9 @@ var jsField = { * List of Validation Rules. */ var jsRuleSets = { - // To start validation process. + /* + * To start validation process. + */ checkValidation: function (activeElem, log) { jsLogger.out('Active Elem', activeElem); var validElem = true; @@ -557,7 +618,9 @@ var jsRuleSets = { return log; }, - // To Check, whether the element have value or not. + /* + * To Check, whether the element have value or not. + */ isSet: function (elem) { // If field is not required, then return "true". if (false === elem.required) return true; @@ -567,7 +630,9 @@ var jsRuleSets = { if (value.length === 0 || value === '' || value === ' ' || value === '[]') status = false; return status; }, - // To Check Element with Min Condition. + /* + * To Check Element with Min Condition. + */ min: function (elem) { // If field is not required, then return "true". if (false === elem.required) return true; @@ -578,7 +643,9 @@ var jsRuleSets = { if (value.length < min && value.length != 0) status = false; return status; }, - // To Check Element with Max Condition. + /* + * To Check Element with Max Condition. + */ max: function (elem) { // If field is not required, then return "true". if (false === elem.required) return true; @@ -589,7 +656,9 @@ var jsRuleSets = { if (value.length > max && value.length != 0) status = false; return status; }, - // To Check Element Email is Valid or Not. + /* + * To Check Element Email is Valid or Not. + */ email: function (elem) { // If field is not required, then return "true". if (false === elem.required) return true; @@ -606,7 +675,9 @@ var jsRuleSets = { if (!email) status = false; return status; }, - // To Check Element Phone Value is Valid or Not. + /* + * To Check Element Phone Value is Valid or Not. + */ phone: function (elem, pattern) { // If field is not required, then return "true". if (false === elem.required) return true; @@ -614,7 +685,9 @@ var jsRuleSets = { if (elem.value === '') status = false; return status; }, - // To Compare two Elements Values. + /* + * To Compare two Elements Values. + */ compare: function (elem1) { var status = false; // If field is not required, then return "true". @@ -643,42 +716,56 @@ var jsFormError = { errorCss: false, // Success Css. successCss: false, - // Initiate overall form error handler. + /* + * Initiate overall form error handler. + */ init: function () { this.errorHit = false; this.errorCss = 'border-color: red;border-radius: 5px;color: red;'; this.successCss = 'border-color: green;border-radius: 5px;color: green;'; }, - // Form error log. + /* + * Form error log. + */ log: function () { jsLogger.out('Form Error Hit', this.errorHit); }, - // Form error style. + /* + * Form error style. + */ style: function (css) { this.errorCss = css.error; this.successCss = css.success; } }; -/* +/** * For manage overall logging with validator. - * */ var jsLogger = { - // Simple log with "heading" and "message". + /* + * Simple log with "heading" and "message". + */ out: function (heading, message) { console.log('======' + heading + '======'); console.log(message); console.log('------------------------'); }, - // For bulk data logging. + /* + * For bulk data logging. + */ bulk: function (data) { console.log(data); }, - // For log data with table. + /* + * For log data with table. + */ table: function (data) { console.table(data); } }; +/** + * General Helping methods. + */ var helper = { /* * To check the keyboard action is window action or not. @@ -700,7 +787,9 @@ var helper = { // Finally return "false" for general keys. return false; }, - // To Scroll Up / Down to notify the item that have validation message. + /* + * To Scroll Up / Down to notify the item that have validation message. + */ scrollToItem: function (item) { // alert(item); location.href = '#' + item; @@ -728,11 +817,13 @@ var helper = { // } } }; -/* +/** * Simple library for Pattern. */ var pattern = { - // To generate pattern from element attribute. + /* + * To generate pattern from element attribute. + */ getDefault: function (event, originalPattern) { if (typeof originalPattern == 'undefined') originalPattern = ''; // Getting special characters list. @@ -751,7 +842,9 @@ var pattern = { } return defaultPattern; }, - // To validate event with the pattern. + /* + * To validate event with the pattern. + */ validate: function (event, pattern) { // Managing the Pattern. var defaultPattern = this.getDefault(event, pattern); @@ -762,11 +855,13 @@ var pattern = { return regex.test(key); } }; -/* +/** * To Manage all kind of error response. */ var validationResponse = { - // Initiating the Response handler. + /* + * Initiating the Response handler. + */ init: function (errorList, option) { this.errorMessage = option.message; // var errorElements = option.errorElem; @@ -775,19 +870,27 @@ var validationResponse = { this.select(errorList.select); this.textArea(errorList.textArea); }, - // To handle the "input" element. + /* + * To handle the "input" element. + */ input: function (elem) { this.process(elem); }, - // To handle the "select" element. + /* + * To handle the "select" element. + */ select: function (elem) { this.process(elem); }, - // To handle the "textArea" element. + /* + * To handle the "textArea" element. + */ textArea: function (elem) { this.process(elem); }, - // To process all handlers. + /* + * To process all handlers. + */ process: function (elem) { var elementDefaultResponse = ''; for (var i in elem) { @@ -817,7 +920,9 @@ var validationResponse = { } } }, - // Perform template creation and update. + /* + * Perform template creation and update. + */ template: function (activeElem, errorType) { jsLogger.out('error Type 0', errorType); var errorIndex = ''; @@ -845,9 +950,11 @@ var validationResponse = { } return elementDefaultResponse; }, - /* Default error handling messages. - If user not specify the messages, - then it will be replaces. */ + /* + * Default error handling messages. + * If user not specify the messages, + * then it will be replaces. + */ default: function (errorType) { var errorMessages = { required: 'This field is required', From df8874aff3dbd34997bd5eaaa9bd65a49969ab3f Mon Sep 17 00:00:00 2001 From: shankar Date: Fri, 2 Jun 2017 07:35:18 +0530 Subject: [PATCH 3/5] Eliminating hash reference in URL. --- src/js/formValidator.js | 64 ++++++++++++++++++++--------------------- 1 file changed, 31 insertions(+), 33 deletions(-) diff --git a/src/js/formValidator.js b/src/js/formValidator.js index 6c69f29..55d9bcf 100644 --- a/src/js/formValidator.js +++ b/src/js/formValidator.js @@ -160,7 +160,7 @@ var jsValidator = { if (true == this.onChange) { this.applyGlobalListener(activeElem); } - jsLogger.out('Only Filter', this.onlyFilter); + //jsLogger.out('Only Filter', this.onlyFilter); // If not only filter, then start validations. if (false === this.onlyFilter || typeof (this.onlyFilter) === 'undefined') { // Initiate validations and update to log. @@ -313,8 +313,8 @@ var jsFilter = { var regex = new RegExp('^[0-9]+$'); // Validation with Code. var key = String.fromCharCode(!event.charCode ? event.which : event.charCode); - jsLogger.out('Limit', regex.test(key) + ' | min |' + min + ' | max | ' + max); - jsLogger.out('Regex', regex.test(key)); + //jsLogger.out('Limit', regex.test(key) + ' | min |' + min + ' | max | ' + max); + //jsLogger.out('Regex', regex.test(key)); // Return status of the Action. if (false === regex.test(key) || parseInt(value) > max || parseInt(value) < min) { event.preventDefault(); @@ -531,7 +531,7 @@ var jsRuleSets = { * To start validation process. */ checkValidation: function (activeElem, log) { - jsLogger.out('Active Elem', activeElem); + //jsLogger.out('Active Elem', activeElem); var validElem = true; // To Generally checks, the field is empty or not. if (!jsRuleSets.isSet(activeElem)) { @@ -541,6 +541,7 @@ var jsRuleSets = { 'id': activeElem.name + '_new1_1_1xv_resp' }); firstErrorHit = activeElem.name + '_new1_1_1xv_resp'; + helper.scrollToItem('#' + firstErrorHit); } // To Check the Value is less than min or not. if (activeElem.min) { @@ -552,6 +553,7 @@ var jsRuleSets = { 'id': activeElem.name + '_new1_1_1xv_resp' }); firstErrorHit = activeElem.name + '_new1_1_1xv_resp'; + helper.scrollToItem('#' + firstErrorHit); validElem = false; } } @@ -566,6 +568,7 @@ var jsRuleSets = { 'id': activeElem.name + '_new1_1_1xv_resp' }); firstErrorHit = activeElem.name + '_new1_1_1xv_resp'; + helper.scrollToItem('#' + firstErrorHit); validElem = false; } } @@ -580,6 +583,7 @@ var jsRuleSets = { 'id': activeElem.name + '_new1_1_1xv_resp' }); firstErrorHit = activeElem.name + '_new1_1_1xv_resp'; + helper.scrollToItem('#' + firstErrorHit); validElem = false; } } @@ -595,13 +599,14 @@ var jsRuleSets = { 'id': activeElem.name + '_new1_1_1xv_resp' }); firstErrorHit = activeElem.name + '_new1_1_1xv_resp'; + helper.scrollToItem('#' + firstErrorHit); validElem = false; } } } // If valid, then reset validation message. if (true === validElem) { - jsLogger.out('Valid Elem', activeElem); + //jsLogger.out('Valid Elem', activeElem); if (activeElem.name !== '') { var elem = document.getElementById(activeElem.name + '_new1_1_1xv_resp'); if (typeof (elem) !== 'undefined' && elem !== null) { @@ -611,7 +616,7 @@ var jsRuleSets = { } // If error occurred, then locate that error if (false !== firstErrorHit) { - helper.scrollToItem(firstErrorHit); + //helper.scrollToItem(firstErrorHit); } // } // Return overall log report of validation. @@ -702,7 +707,7 @@ var jsRuleSets = { var elem2 = document.getElementById(elem2_id); if (elem1.value === elem2.value) status = true; } - jsLogger.out('Compare Status', status); + //jsLogger.out('Compare Status', status); return status; } }; @@ -791,30 +796,23 @@ var helper = { * To Scroll Up / Down to notify the item that have validation message. */ scrollToItem: function (item) { - // alert(item); - location.href = '#' + item; - // // Update by Tag Name. - // var elem_name = item.nodeName; - // // If Element is not valid, then return false. - // if (!elem_name) return false; - // if (null == elem_name) return false; - // // Re-Fetching elements by its Name. - // item = document.getElementsByName(elem_name); - // - // var diff = (item.offsetTop - window.scrollY) / 20; - // if (!window._lastDiff) { - // window._lastDiff = 0; - // } - // if (Math.abs(diff) > 2) { - // window.scrollTo(0, (window.scrollY + diff)); - // clearTimeout(window._TO); - // if (diff !== window._lastDiff) { - // window._lastDiff = diff; - // window._TO = setTimeout(this.scrollToItem, 100, item); - // } - // } else { - // window.scrollTo(0, item.offsetTop) - // } + // Form hash value. + var hash = '#' + item; + // Navigate with the hash value. + window.location.href = hash; + // Remove the navigated value. + this.removeHash(hash); + }, + /* + * To remove the hash value from the URL. + */ + removeHash: function (hash) { + // Getting the actual URL. + var path = window.location.href; + // Replacing the URL with specific hash value. + path = path.replace(hash, ''); + // Update to url history. + window.history.pushState('', 'Title', path) } }; /** @@ -924,7 +922,7 @@ var validationResponse = { * Perform template creation and update. */ template: function (activeElem, errorType) { - jsLogger.out('error Type 0', errorType); + //jsLogger.out('error Type 0', errorType); var errorIndex = ''; var activeError = ''; var elementDefaultResponse = activeElem.el.getAttribute('data-message'); @@ -934,7 +932,7 @@ var validationResponse = { errorType = this.errorMessage[errorType]; activeElem.el.getAttribute('data-message'); if (errorType) { - jsLogger.out('errorType', errorType); + //jsLogger.out('errorType', errorType); activeError = errorType; // If error type is Min or Max, then it will proceed responsive. if (activeElem.type == 'min' || activeElem.type == 'max') { From 701491863eafc0e3102117d4e5bb27791b65d80f Mon Sep 17 00:00:00 2001 From: shankarThiyagaraajan Date: Tue, 13 Jun 2017 18:35:50 +0530 Subject: [PATCH 4/5] Minor updates. --- src/demo/index3.html | 2 +- src/js/formValidator.js | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/demo/index3.html b/src/demo/index3.html index 8c9eb9b..4ef3497 100644 --- a/src/demo/index3.html +++ b/src/demo/index3.html @@ -38,7 +38,7 @@ placeholder="Enter Phone No">
-







diff --git a/src/js/formValidator.js b/src/js/formValidator.js index 55d9bcf..1cdfcfe 100644 --- a/src/js/formValidator.js +++ b/src/js/formValidator.js @@ -131,7 +131,7 @@ var jsValidator = { if (errorList.textArea.length === 0) { // If, Select elements have no errors. if (errorList.select.length === 0) { - // If validation pass, then update "validationPass" object. + // If validation pass, then update "status" object. status = true; } } @@ -168,7 +168,7 @@ var jsValidator = { } } } - jsLogger.out('Log', log); + // jsLogger.out('Log', log); return log; }, /* @@ -196,11 +196,11 @@ var jsValidator = { * To perform quick validation to respond those fields. */ quickValidation: function (event) { - jsLogger.out('Quick', event); + // jsLogger.out('Quick', event); var log = []; var target = event.target; log = jsRuleSets.checkValidation(target, log); - jsLogger.out('Quick Out', log); + // jsLogger.out('Quick Out', log); validationResponse.process(log); }, /* @@ -733,7 +733,7 @@ var jsFormError = { * Form error log. */ log: function () { - jsLogger.out('Form Error Hit', this.errorHit); + // jsLogger.out('Form Error Hit', this.errorHit); }, /* * Form error style. From 0ffd3fef8010da9d34542ecfdaad913c40c5e471 Mon Sep 17 00:00:00 2001 From: shankarThiyagaraajan Date: Mon, 19 Jun 2017 19:12:35 +0530 Subject: [PATCH 5/5] Implement min & max restrictions. --- src/demo/index3.html | 59 ++++++++++++++++++++++++++++------------- src/js/formValidator.js | 10 +++++-- 2 files changed, 49 insertions(+), 20 deletions(-) diff --git a/src/demo/index3.html b/src/demo/index3.html index 4ef3497..cf442c5 100644 --- a/src/demo/index3.html +++ b/src/demo/index3.html @@ -15,38 +15,55 @@ +






+
+






+
-








+ + +







+
-









+ + +








+ +
-







+ + +






+ - +
-













+ + +












+ @@ -54,7 +71,13 @@ -









+ + +









+ +
+ +







@@ -65,18 +88,18 @@