From 842138356ff66816ab7744586e19a4ac996caebb Mon Sep 17 00:00:00 2001 From: shankar Date: Sat, 29 Apr 2017 23:21:45 +0530 Subject: [PATCH 01/11] - Form Validation Improvements. --- .idea/jsLibraryMappings.xml | 6 +++ src/demo/index.html | 30 +++++++++++ src/js/formValidator.js | 15 +----- src/js/validatorNew.js | 104 ++++++++++++++++++++++++++++++++++++ 4 files changed, 142 insertions(+), 13 deletions(-) create mode 100644 .idea/jsLibraryMappings.xml create mode 100644 src/demo/index.html create mode 100644 src/js/validatorNew.js diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml new file mode 100644 index 0000000..b8387eb --- /dev/null +++ b/.idea/jsLibraryMappings.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/demo/index.html b/src/demo/index.html new file mode 100644 index 0000000..a6e3595 --- /dev/null +++ b/src/demo/index.html @@ -0,0 +1,30 @@ + + + + + + + +
+
+
+ + +
+ +
+
+ + + + + \ No newline at end of file diff --git a/src/js/formValidator.js b/src/js/formValidator.js index 5b3fd32..f5674c9 100644 --- a/src/js/formValidator.js +++ b/src/js/formValidator.js @@ -1,5 +1,4 @@ //---------------------Form New Ticket--------------------------- - var warning_font_color = '#761c19'; var warning_class = ''; var form = { @@ -21,9 +20,9 @@ var form = { elements[0].parentNode.removeChild(elements[0]); } // **********************************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) { @@ -288,14 +287,4 @@ function validate(data) { // Trigger the Validation process. function initValidation(activeForm) { return form.validate(activeForm); -} - - -var data = { - form: 'new_ticket_form', - warning_color: 'aa0000', - new_class: 'test' }; - -// Default Form Init. -validate(data); diff --git a/src/js/validatorNew.js b/src/js/validatorNew.js new file mode 100644 index 0000000..9dfe530 --- /dev/null +++ b/src/js/validatorNew.js @@ -0,0 +1,104 @@ +/** + * To Perform Effective Validations with HTML Form. + */ + +'use strict'; + +var jsValidator = { + formData: false, + jsForm: false, + jsSettings: false, + jsFormError: false, + + init: function (option) { + jsLogger.table(option); + + this.jsForm = jsForm.init(option); + this.jsSettings = jsSettings.init(option); + }, + rules: function () { + + } +}; + +var jsForm = { + form: false, + input: false, + select: false, + textArea: false, + label: false, + + init: function (option) { + jsLogger.out('Form', option.form); + // To Register Form. + this.registerForm(option.form); + // To Parsing the Form. + this.parseForm(this.form); + return this; + }, + + registerForm: function (form) { + if (typeof form == 'undefined') jsLogger.out('Form Identification', 'Form Identification is Missing !'); + + this.form = document.getElementById(form); + }, + + parseForm: function (form) { + this.input = form.getElementsByTagName('input'); + this.select = form.getElementsByTagName('select'); + this.textArea = form.getElementsByTagName('textarea'); + this.label = form.getElementsByTagName('label'); + }, + log: function () { + alert(this.form); + jsLogger.out('Form 234', this.form); + jsLogger.out('input', this.input); + jsLogger.out('select', this.select); + jsLogger.out('textarea', this.textArea); + jsLogger.out('labels', this.labels); + } +}; + +var jsSettings = { + + errorColor: false, + followedElement: false, + errorTemplate: false, + + init: function (option) { + //if (typeof option.errorColor !== 'undefined') option.errorColor = false; + this.errorColor = option.errorColor; + this.followedElement = option.followedElement; + this.errorTemplate = option.errorTemplate; + return this; + }, + log: function () { + jsLogger.out(this.errorColor); + jsLogger.out(this.followedElement); + jsLogger.out(this.errorTemplate); + } +}; + +var jsFormError = { + errorHit: false, + init: function () { + this.errorHit = false; + }, + log: function () { + jsLogger.out('Form Error Hit', this.errorHit); + } +}; + +var jsLogger = { + out: function (heading, message) { + console.log('============' + heading + '============'); + console.log(message); + console.log('========================================'); + }, + bulk: function (data) { + console.log(data); + }, + table: function (data) { + console.table(data); + } +}; From aa8624eb92a209a7fe0a6797a592222d9a56c29a Mon Sep 17 00:00:00 2001 From: shankar Date: Sat, 29 Apr 2017 23:31:36 +0530 Subject: [PATCH 02/11] - Form Validation (Added Comments) --- src/js/validatorNew.js | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/src/js/validatorNew.js b/src/js/validatorNew.js index 9dfe530..fb688b9 100644 --- a/src/js/validatorNew.js +++ b/src/js/validatorNew.js @@ -9,11 +9,13 @@ var jsValidator = { jsForm: false, jsSettings: false, jsFormError: false, - + // Initiating the Validator. init: function (option) { jsLogger.table(option); + // Update "jsForm" to Global Object. this.jsForm = jsForm.init(option); + // Update "jsSettings" to Global Object. this.jsSettings = jsSettings.init(option); }, rules: function () { @@ -21,6 +23,9 @@ var jsValidator = { } }; +/** + * To Perform all Form based Operations. + */ var jsForm = { form: false, input: false, @@ -28,6 +33,7 @@ var jsForm = { textArea: false, label: false, + // To Initiating the "jsForm". init: function (option) { jsLogger.out('Form', option.form); // To Register Form. @@ -37,21 +43,29 @@ var jsForm = { return this; }, + // 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 !'); + // Fetch Form element from Document. this.form = document.getElementById(form); }, + // To Parse all Relative Form components. parseForm: function (form) { + // "Input" elements like "text, date, time..." this.input = form.getElementsByTagName('input'); + // "Select" element. this.select = form.getElementsByTagName('select'); + // "TextArea" element. this.textArea = form.getElementsByTagName('textarea'); + // "Label" element. this.label = form.getElementsByTagName('label'); }, log: function () { alert(this.form); - jsLogger.out('Form 234', this.form); + jsLogger.out('Form', this.form); jsLogger.out('input', this.input); jsLogger.out('select', this.select); jsLogger.out('textarea', this.textArea); @@ -59,12 +73,16 @@ var jsForm = { } }; +/** + * To Update overall JsValidator Settings. + */ var jsSettings = { errorColor: false, followedElement: false, errorTemplate: false, + // To Initiate the Configurations. init: function (option) { //if (typeof option.errorColor !== 'undefined') option.errorColor = false; this.errorColor = option.errorColor; @@ -79,6 +97,9 @@ var jsSettings = { } }; +/** + * To Manage JsValidator Errors. + */ var jsFormError = { errorHit: false, init: function () { From 9f1d2021c20f6789faa6f78a82520e7c0aafc842 Mon Sep 17 00:00:00 2001 From: shankar Date: Sat, 29 Apr 2017 23:57:22 +0530 Subject: [PATCH 03/11] - Form Validation (Added Comments) --- .gitignore | 1 + .idea/.name | 1 + .idea/JavascriptFormValidator.iml | 8 ++ .idea/copyright/profiles_settings.xml | 3 + .idea/encodings.xml | 6 ++ .idea/misc.xml | 16 ++++ .idea/modules.xml | 8 ++ .idea/vcs.xml | 6 ++ .idea/watcherTasks.xml | 4 + src/demo/index.html | 4 + src/js/validatorNew.js | 101 ++++++++++++++++++++------ 11 files changed, 134 insertions(+), 24 deletions(-) create mode 100644 .gitignore create mode 100644 .idea/.name create mode 100644 .idea/JavascriptFormValidator.iml create mode 100644 .idea/copyright/profiles_settings.xml create mode 100644 .idea/encodings.xml create mode 100644 .idea/misc.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml create mode 100644 .idea/watcherTasks.xml diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..bfa6a22 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +# Created by .ignore support plugin (hsz.mobi) diff --git a/.idea/.name b/.idea/.name new file mode 100644 index 0000000..f250442 --- /dev/null +++ b/.idea/.name @@ -0,0 +1 @@ +JavascriptFormValidator \ No newline at end of file diff --git a/.idea/JavascriptFormValidator.iml b/.idea/JavascriptFormValidator.iml new file mode 100644 index 0000000..c956989 --- /dev/null +++ b/.idea/JavascriptFormValidator.iml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/copyright/profiles_settings.xml b/.idea/copyright/profiles_settings.xml new file mode 100644 index 0000000..e7bedf3 --- /dev/null +++ b/.idea/copyright/profiles_settings.xml @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/.idea/encodings.xml b/.idea/encodings.xml new file mode 100644 index 0000000..97626ba --- /dev/null +++ b/.idea/encodings.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..eabe228 --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..c82afdc --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml new file mode 100644 index 0000000..9338ba6 --- /dev/null +++ b/.idea/watcherTasks.xml @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/demo/index.html b/src/demo/index.html index a6e3595..2f7a435 100644 --- a/src/demo/index.html +++ b/src/demo/index.html @@ -9,7 +9,11 @@
+ + + +
diff --git a/src/js/validatorNew.js b/src/js/validatorNew.js index fb688b9..249dcd3 100644 --- a/src/js/validatorNew.js +++ b/src/js/validatorNew.js @@ -1,9 +1,6 @@ /** * To Perform Effective Validations with HTML Form. */ - -'use strict'; - var jsValidator = { formData: false, jsForm: false, @@ -13,13 +10,40 @@ var jsValidator = { init: function (option) { jsLogger.table(option); - // Update "jsForm" to Global Object. - this.jsForm = jsForm.init(option); // Update "jsSettings" to Global Object. this.jsSettings = jsSettings.init(option); + // Update "jsForm" to Global Object. + this.jsForm = jsForm.init(option); + + return this; }, - rules: function () { + check: function () { + + } +}; + +/** + * To Update overall JsValidator Settings. + */ +var jsSettings = { + errorColor: false, + followedElement: false, + errorTemplate: false, + phonePattern: false, + + // To Initiate the Configurations. + init: function (option) { + //if (typeof option.errorColor !== 'undefined') option.errorColor = false; + this.errorColor = option.errorColor; + this.followedElement = option.followedElement; + this.errorTemplate = option.errorTemplate; + return this; + }, + log: function () { + jsLogger.out(this.errorColor); + jsLogger.out(this.followedElement); + jsLogger.out(this.errorTemplate); } }; @@ -40,6 +64,9 @@ var jsForm = { this.registerForm(option.form); // To Parsing the Form. this.parseForm(this.form); + // To Filter Required Elements. + this.required(); + return this; }, @@ -63,37 +90,63 @@ var jsForm = { // "Label" element. this.label = form.getElementsByTagName('label'); }, + required: function () { + this.input = jsField.required(this.input); + this.select = jsField.required(this.select); + this.textArea = jsField.required(this.textArea); + this.log(); + }, log: function () { - alert(this.form); jsLogger.out('Form', this.form); jsLogger.out('input', this.input); jsLogger.out('select', this.select); jsLogger.out('textarea', this.textArea); - jsLogger.out('labels', this.labels); + jsLogger.out('labels', this.label); } }; /** - * To Update overall JsValidator Settings. + * Perform Operations in Field level. */ -var jsSettings = { +var jsField = { + required: function (field) { + var requiredFieldsList = []; + for (var i = 0; i < field.length; i++) { + if (field[i].required == true) { + requiredFieldsList.push(field[i]); + } + } + return requiredFieldsList; + } +}; - errorColor: false, - followedElement: false, - errorTemplate: false, +/** + * List of Validation Rules. + */ +var ruleSets = { + // To Check, whether the element have value or not. + isSet: function (elem) { - // To Initiate the Configurations. - init: function (option) { - //if (typeof option.errorColor !== 'undefined') option.errorColor = false; - this.errorColor = option.errorColor; - this.followedElement = option.followedElement; - this.errorTemplate = option.errorTemplate; - return this; }, - log: function () { - jsLogger.out(this.errorColor); - jsLogger.out(this.followedElement); - jsLogger.out(this.errorTemplate); + // To Check Element with Min Condition. + min: function (elem, val) { + + }, + // To Check Element with Max Condition. + max: function (elem, val) { + + }, + // To Check Element Email is Valid or Not. + email: function (elem) { + + }, + // To Check Element Phone Value is Valid or Not. + phone: function (elem, pattern) { + + }, + // To Compare two Elements Values. + compare: function (elem1, elem2) { + } }; From ae370db7b282e5ce8f1305418980f9bdf6182602 Mon Sep 17 00:00:00 2001 From: shankar Date: Sun, 30 Apr 2017 14:20:48 +0530 Subject: [PATCH 04/11] - Listeners and Filters are Implemented. --- src/demo/index.html | 18 +++-- src/js/validatorNew.js | 150 +++++++++++++++++++++++++++++++++++++---- 2 files changed, 149 insertions(+), 19 deletions(-) diff --git a/src/demo/index.html b/src/demo/index.html index 2f7a435..f940e52 100644 --- a/src/demo/index.html +++ b/src/demo/index.html @@ -9,10 +9,14 @@
- - - - + + + +
@@ -21,11 +25,13 @@ + +