Merge pull request #5 from global-source/newValidationElements

Major Update with Elements and Security

Author: shankarThiyagaraajan

src/demo/index.html

@@ -10,38 +10,46 @@
         <div>
             <div>
                 <label for="name">Name :</label>
-                <input type="text" data-allow="onlyAlpha" id="check" data-allowSpecial="_." value="" name="name" required>
+                <input type="text" data-allow="onlyAlpha" pattern="^[a-zA-C]+$" id="check" data-allowSpecial="_."
+                       value=""
+                       name="name"
+                       required>
             </div>
             <div>
                 <label for="name">String :</label>
                 <input type="text" data-allow="string" value="" name="name" required>
             </div>
             <div>
                 <label for="name">String + [0-5]:</label>
-                <input type="text" data-allow="^[a-zA-Z0-5]+$" value="" name="name" required>
+                <input type="text" data-allow="string   " pattern="^[a-zA-Z0-5]+$" value="" name="name" required>
             </div>
             <div>
                 <label for="name">Number in [3-7] :</label>
                 <input type="number" name="name" id="number" min="3" max="7" required>
             </div>
             <div>
                 <label for="name">Password :</label>
-                <input type="password" data-check="rePassword" id="password" data-allow="^[a-zA-Z0-5]+$" value=""
+                <input type="password" data-check="rePassword" id="password" pattern="^[a-zA-Z0-5]+$"
+                       data-allow="password"
+                       value=""
                        name="name"
                        required>
             </div>
             <div>
                 <label for="name">Re-Password :</label>
-                <input type="password" name="name" data-parent="password" id="rePassword" data-allow="^[a-zA-Z0-5]+$"
+                <input type="password" name="name" data-parent="password" id="rePassword" pattern="^[a-zA-Z0-5]+$"
+                       data-allow="password"
                        required>
             </div>
             <div>
                 <select required>
+                    <option value=""></option>
                     <option value="123">123</option>
                 </select>
             </div>
             <div>
                 <select required>
+                    <option value=""></option>
                     <option value="456">456</option>
                 </select>
             </div>
@@ -54,22 +62,22 @@
 </div>
 
 <!--<script src="./../js/formValidator.min.js"></script>-->
-<!--<script src="./../js/validatorNew.js"></script>-->
-<script src="../js/validatorNew.es6.js"></script>
+<script src="./../js/validatorNew.js"></script>
+<!--<script src="../js/validatorNew.es6.js"></script>-->
 <script>
 
     (function () {
 
-//        var val = jsValidator.init({
-//            form: 'demoValidation',
-//            onlyFilter: false
-//        });
-
-        var val = new jsValidator().init({
+        var val = jsValidator.init({
             form: 'demoValidation',
             onlyFilter: false
         });
 
+//        var val = new jsValidator().init({
+//            form: 'demoValidation',
+//            onlyFilter: false
+//        });
+
     }());
 </script>
 </body>

src/js/validatorNew.es6.js

@@ -39,8 +39,6 @@ class jsValidator {
         this.jsFormError = false;
         // Overall error list.
         this.formErrorList = {};
-        // Overall validation status.
-        this.validationPass = false;
         // Common Logger Instance.
         this.jsFilter = false;
         this.jsRuleSet = false;
@@ -175,12 +173,8 @@ class jsValidator {
     // Single step instance validator for Ajax form submissions.
     validate() {
         // Initiate form Check.
-        this.check();
-        // Return validation status.
-        return this.validationPass;
+        return this.check();
     }
-
-    //};
 }
 
 /*
@@ -213,6 +207,10 @@ class jsFilter {
             case 'string':
                 element.addEventListener("keypress", current.constructor.isAlphaNumeric, false);
                 break;
+            // Allow only alpha Numeric [a-zA-Z0-9] not special characters.
+            case 'password':
+                element.addEventListener("keypress", current.constructor.isValidPassword, false);
+                break;
             // Allow based on the pattern given.
             default:
                 element.addEventListener("keypress", current.constructor.isPatternValid, false);
@@ -238,7 +236,7 @@ class jsFilter {
     static isInLimit(event) {
         var value = event.target.value;
         // To check is this action is from "windows" action or not.
-        if (true === isWindowAction(event)) return true;
+        if (true === helper.isWindowAction(event)) return true;
 
         // Getting object from element.
         var min = event.target.min;
@@ -265,60 +263,52 @@ class jsFilter {
     // Only allow alpha([a-zA-Z]).
     static isAlpha(event) {
         // To check is this action is from "windows" action or not.
-        if (true === isWindowAction(event)) return true;
-        // Getting special characters list.
-        var allow_special = event.target.getAttribute('data-allowSpecial');
-        // Set default values for special characters.
-        if (!allow_special && allow_special == null) allow_special = '';
-        // Format to string.
-        allow_special = allow_special.toString();
-        // Validate with special formed pattern.
-        var regex = new RegExp('^[a-zA-Z' + allow_special + ']+$');
-        // Validation with Code.
-        var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
-        jsLogger.out('Alpha', regex.test(key));
+        if (true === helper.isWindowAction(event)) return true;
+        var status = helper.patternValid(event, 'a-zA-Z');
+        console.log(status);
         // Return status of the Action.
-        if (false === regex.test(key)) event.preventDefault();
+        if (false === status) event.preventDefault();
     };
 
     // Only allow alpha([a-zA-Z0-9]).
     static isAlphaNumeric(event) {
         // To check is this action is from "windows" action or not.
-        if (true === isWindowAction(event)) return true;
-        // Getting special characters list.
-        var allow_special = event.target.getAttribute('data-allowSpecial');
-        // Set default values for special characters.
-        if (!allow_special && allow_special == null) allow_special = '';
-        // Format to string.
-        allow_special = allow_special.toString();
-        // Validate with special formed pattern.
-        var regex = new RegExp('^[a-zA-Z0-9' + allow_special + ']+$');
-        // Validation with Code.
-        var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
-        jsLogger.out('Alpha', regex.test(key));
+        if (true === helper.isWindowAction(event)) return true;
+        // Managing the Pattern.
+        var status = helper.patternValid(event, 'a-zA-Z0-9');
+        // Return status of the Action.
+        if (false === status) event.preventDefault();
+    };
+
+    static isValidPassword(event) {
+        // Prevent using "space".
+        var charCode = (event.which) ? event.which : event.keyCode;
+        if (charCode === 32) {
+            event.preventDefault();
+            return false;
+        }
+        // To check is this action is from "windows" action or not.
+        if (true === helper.isWindowAction(event)) return true;
+        // Managing the Pattern.
+        var status = helper.patternValid(event, 'a-zA-Z0-9');
         // Return status of the Action.
-        if (false === regex.test(key)) event.preventDefault();
+        if (false === status) event.preventDefault();
     };
 
     // 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 === isWindowAction(event)) return true;
-        // Getting special characters list.
-        var pattern = event.target.getAttribute('data-allow');
-        // Validate with special formed pattern.
-        var regex = new RegExp(pattern);
-        // Validation with Code.
-        var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
-        jsLogger.out('Alpha', regex.test(key));
+        if (true === helper.isWindowAction(event)) return true;
+        // Managing the Pattern.
+        var status = helper.patternValid(event, 'a-zA-Z0-9');
         // Return status of the Action.
-        if (false === regex.test(key)) event.preventDefault();
+        if (false === status) event.preventDefault();
     };
 
     // Check is numeric or not.
     static isNumberKey(event) {
         // To check is this action is from "windows" action or not.
-        if (true === isWindowAction(event)) return true;
+        if (true === helper.isWindowAction(event)) return true;
         // Validation with Code.
         var charCode = (event.which) ? event.which : event.keyCode;
         if (charCode === 46 || charCode > 31 && (charCode < 48 || charCode > 57)) {
@@ -466,23 +456,29 @@ class jsRuleSets {
     // To Check, whether the element have value or not.
     static isSet(elem) {
         var status = true;
-        // Check length and empty or not.
-        if (elem.length === 0 || elem.value === '') status = false;
+        var value = elem.value;
+        //TODO: Implement suitable solution for this.
+        if (value.length == 0 || value == '' || value == ' ') status = false;
         return status;
     };
 
     // To Check Element with Min Condition.
     static min(elem) {
         var status = true;
+        var value = elem.value;
+        var min = elem.min;
         //TODO: Implement suitable solution for this.
-        //if (elem.length < elem.min && elem.length !== 0) status = false;
+        if (value < min) status = false;
         return status;
     };
 
     // To Check Element with Max Condition.
     static max(elem) {
         var status = true;
-        if (elem.value > elem.max) status = false;
+        var value = elem.value;
+        var max = elem.max;
+        //TODO: Implement suitable solution for this.
+        if (value > max) status = false;
         return status;
     };
 
@@ -514,11 +510,13 @@ class jsRuleSets {
         var elem2_id = elem1.getAttribute('data-check');
 
         if (elem2_id == null) elem2_id = elem1.getAttribute('data-parent');
-
         elem2_id = elem2_id.toString();
+
         var elem2 = document.getElementById(elem2_id);
+
         var status = true;
-        if ((elem1.value !== elem2.value) && elem1.length !== elem2.length) status = false;
+        if (elem1.value !== elem2.value) status = false;
+        jsLogger.out('Compare Status', status);
         return status;
     }
 }
@@ -581,24 +579,56 @@ var jsLogger = {
     }
 };
 
-/*
- * To check the keyboard action is window action or not.
- */
-function isWindowAction(event) {
-    // Getting the event to be triggered.
-    var theEvent = event || window.event;
-    // Getting the type of event or code.
-    var key = theEvent.keyCode || theEvent.which;
-
-    // Check with list of code and ignore holding.
-    // Tab, Space, Home, End, Up, Down, Left, Right...
-    if (key === 9 || key === 32 || key === 13 || key === 8 || (key >= 35 && key <= 40)) { //TAB was pressed
-        return true;
+var helper = {
+    /*
+     * To check the keyboard action is window action or not.
+     */
+    isWindowAction: function (event) {
+
+        // Getting the event to be triggered.
+        var theEvent = event || window.event;
+        // Getting the type of event or code.
+        var key = theEvent.shiftKey || theEvent.which;
+        // Check with list of code and ignore holding.
+        // 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.
+        key = String.fromCharCode(key);
+        // Return also if length is 0.
+        if (key.length == 0) return true;
+
+        // Finally return "false" for general keys.
+        return false;
+    },
+    getDefaultPattern: function (event, originalPattern) {
+        if (typeof originalPattern == 'undefined') var originalPattern = false;
+        // Getting special characters list.
+        var allow_special = event.target.getAttribute('data-allowSpecial');
+        var pattern = event.target.pattern;
+        console.log(pattern.length);
+        var defaultPattern;
+        // Set default values for special characters.
+        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 {
+            defaultPattern = '^[' + originalPattern + allow_special + ']+$';
+        }
+        return defaultPattern;
+    },
+    patternValid: function (event, pattern) {
+        // Managing the Pattern.
+        var defaultPattern = this.getDefaultPattern(event, pattern);
+        // Validate with special formed pattern.
+        var regex = new RegExp(defaultPattern);
+        // Validation with Code.
+        var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
+        return regex.test(key);
     }
-    // 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;
-}
+};