Added Input Match (confirmation) Validator

- Added Match validator (ex.: password confirmation) - Added throw error on validators (between_len & between_num) if it doesn't include 2 params
ghiscoding · Jan 2, 2015 · 44fe9de · 44fe9de
1 parent d106996
commit 44fe9de
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 9 deletions.
diff --git a/angular-validation.js b/angular-validation.js
@@ -107,6 +107,9 @@
               case "betweenLen" :
               case "between_len" :
                 var range = params[1].split(',');
+                if (range.length !== 2) {
+                  throw "This validation must include exactly 2 params separated by a comma (,) ex.: between_len:1,5";
+                }
                 validators[i] = {
                   pattern: "^.{" + range[0] + "," + range[1] + "}$",
                   message: "INVALID_BETWEEN_CHAR",
@@ -117,6 +120,9 @@
               case "betweenNum" :
               case "between_num" :
                 var range = params[1].split(',');
+                if (range.length !== 2) {
+                  throw "This validation must include exactly 2 params separated by a comma (,) ex.: between_num:1,5";
+                }
                 validators[i] = {
                   condition: [">=","<="],
                   message: "INVALID_BETWEEN_NUM",
@@ -246,6 +252,14 @@
                   type: "regex"
                 };
                 break; 
+              case "match" :
+                var args = params[1].split(',');
+                validators[i] = {
+                  message: "INVALID_INPUT_MATCH",
+                  params: args,
+                  type: "match"
+                };
+                break;
               case "maxLen" :
               case "max_len" :
                 validators[i] = {
@@ -438,6 +452,10 @@
               }else {
                 isValid = testCondition(validators[j].condition, parseFloat(strValue), parseFloat(validators[j].params[0]));
               }
+            }else if(validators[j].type === "match") {
+              var otherNgModel = validators[j].params[0];
+              var otherNgModelVal = scope.$eval(otherNgModel);
+              isValid = (otherNgModelVal === strValue);
             }else {
               // a 'disabled' element should always be valid, there is no need to validate it
               if(elm.prop('disabled')) {
@@ -455,6 +473,11 @@
               // replace any error message params that were passed              
               if(typeof validators[j].params !== "undefined") {
                 for(var k = 0, kln = validators[j].params.length; k < kln; k++) { 
+                  if(validators[j].type === "match" && kln > 1 && k === 0) {
+                    // if validation type is "match" and include more than 1 params
+                    // then we'll skip param[0] to find our real text inside param[1]
+                    continue;
+                  }
                   message = message.replace((':param'), validators[j].params[k]);
                 }                
               }

diff --git a/legacy-angular1.2.x/angular-validation.js b/legacy-angular1.2.x/angular-validation.js
@@ -105,6 +105,9 @@
               case "betweenLen" :
               case "between_len" :
                 var range = params[1].split(',');
+                if (range.length !== 2) {
+                  throw "This validation must include exactly 2 params separated by a comma (,) ex.: between_len:1,5";
+                }
                 validators[i] = {
                   pattern: "^.{" + range[0] + "," + range[1] + "}$",
                   message: "INVALID_BETWEEN_CHAR",
@@ -115,6 +118,9 @@
               case "betweenNum" :
               case "between_num" :
                 var range = params[1].split(',');
+                if (range.length !== 2) {
+                  throw "This validation must include exactly 2 params separated by a comma (,) ex.: between_num:1,5";
+                }
                 validators[i] = {
                   condition: [">=","<="],
                   message: "INVALID_BETWEEN_NUM",
@@ -244,6 +250,14 @@
                   type: "regex"
                 };
                 break; 
+              case "match" :
+                var args = params[1].split(',');
+                validators[i] = {
+                  message: "INVALID_INPUT_MATCH",
+                  params: args,
+                  type: "match"
+                };
+                break;
               case "maxLen" :
               case "max_len" :
                 validators[i] = {
@@ -436,6 +450,10 @@
               }else {
                 isValid = testCondition(validators[j].condition, parseFloat(strValue), parseFloat(validators[j].params[0]));
               }
+            }else if(validators[j].type === "match") {
+              var otherNgModel = validators[j].params[0];
+              var otherNgModelVal = scope.$eval(otherNgModel);
+              isValid = (otherNgModelVal === strValue);
             }else {
               // a 'disabled' element should always be valid, there is no need to validate it
               if(elm.prop('disabled')) {
@@ -453,6 +471,11 @@
               // replace any error message params that were passed              
               if(typeof validators[j].params !== "undefined") {
                 for(var k = 0, kln = validators[j].params.length; k < kln; k++) { 
+                  if(validators[j].type === "match" && kln > 1 && k === 0) {
+                    // if validation type is "match" and include more than 1 params
+                    // then we'll skip param[0] to find our real text inside param[1]
+                    continue;
+                  }
                   message = message.replace((':param'), validators[j].params[k]);
                 }                
               }

diff --git a/lib/angular-translate/angular-translate-loader-static-files.min.js b/lib/angular-translate/angular-translate-loader-static-files.min.js
@@ -1,5 +1,5 @@
 /*!
- * angular-translate - v2.4.2 - 2014-10-21
+ * angular-translate - v2.5.2 - 2014-12-10
  * http://github.com/angular-translate/angular-translate
  * Copyright (c) 2014 ; Licensed MIT
  */

diff --git a/locales/validation/en.json b/locales/validation/en.json
@@ -19,8 +19,9 @@
     "INVALID_FLOAT":            "May only contain a float value (integer excluded). ",
     "INVALID_FLOAT_SIGNED":     "May only contain a positive or negative float value (integer excluded). ",
     "INVALID_IBAN":             "Must a valid IBAN. ",
+    "INVALID_INPUT_MATCH":      "Confirmation field does not match specified field \":param\". ",
     "INVALID_INTEGER":          "Must be a positive integer. ",
-    "INVALID_INTEGER_SIGNED":   "Must be a positive or negative integer. ",    
+    "INVALID_INTEGER_SIGNED":   "Must be a positive or negative integer. ",        
     "INVALID_IPV4":             "Must be a valid IP (IPV4). ",    
     "INVALID_IPV6":             "Must be a valid IP (IPV6). ",    
     "INVALID_IPV6_HEX":         "Must be a valid IP (IPV6 Hex). ",    
@@ -51,6 +52,8 @@
     "INPUT12":          "Time (hh:mm OR hh:mm:ss) -- NOT Required",
     "INPUT13":          "AlphaDashSpaces + Required + Minimum(5) Characters -- MUST USE: validation-error-to=\" \"",
     "INPUT14":          "Alphanumeric + Required -- NG-DISABLED",
+    "INPUT15":          "Password",
+    "INPUT16":          "Password Confirmation",
     "CHANGE_LANGUAGE":  "Change language.",
     "SAVE":             "Save",
     "SELECT1":          "Required (select) -- NoEVENT default(keyup) -- Directive will validate has EVENT (blur)",

diff --git a/locales/validation/fr.json b/locales/validation/fr.json
@@ -19,6 +19,7 @@
     "INVALID_FLOAT":            "Doit être obligatoirement un nombre flottant (nombre entier exclu). ",
     "INVALID_FLOAT_SIGNED":     "Doit être obligatoirement un nombre flottant positif ou négatif (nombre entier exclu). ",  
     "INVALID_IBAN":             "Doit être un IBAN valide. ",
+    "INVALID_INPUT_MATCH":      "Le champs de confirmation ne correspond pas au champs spécifié \":param\". ",   
     "INVALID_INTEGER":          "Doit être un nombre entier positif. ",
     "INVALID_INTEGER_SIGNED":   "Doit être un nombre entier positif ou négatif. ",    
     "INVALID_IPV4":             "Doit être un IP valide (IPV4). ",    
@@ -51,6 +52,8 @@
     "INPUT12":          "Time (hh:mm OU hh:mm:ss)  -- NON Requis",
     "INPUT13":          "AlphaDashSpaces + Requis + Minimum(5) Caractères -- DOIT UTILISER: validation-error-to=\" \"",
     "INPUT14":          "Alphanumérique + Requis -- NG-DISABLED",
+    "INPUT15":          "Mot de Passe",
+    "INPUT16":          "Mot de Passe (Confirmation)",
     "CHANGE_LANGUAGE":  "Changer de langue.",
     "SAVE":             "Sauvegarder",
     "SELECT1":          "Requis (select) -- Aucun EVENT défaut(keyup) -- Directive va valider avec EVENT (blur)",

diff --git a/readme.md b/readme.md
@@ -1,6 +1,6 @@
 #Angular Validation 
 ### Form validation after user inactivity (customizable timeout)
-`Version: 1.3` 
+`Version: 1.3.1` 
 
 Angular Validation made easy! Angular Validation is an angular directive with locales (languages) with a simple approach of defining your validation in 1 line and displaying the errors on another 1 line...that's it! 
 
@@ -35,13 +35,23 @@ P.S. For real live example, please download the Github project and run the `inde
 <input type="number" name="input3" ng-model="form1.input3" validation="numeric|between_num:6,99.9|required"  />
 <span class="validation text-danger"></span>
 
-<!-- example 4 - with Regular Expression (Date Code of YYWW) -->
-<label for="input4">Multiple Validations + Custom Regex of Date Code (YYWW)</label>
-<input type="text" name="input4" ng-model="form1.input4" 
+<!-- example 4 -->
+<!-- input match confirmation, as for example: password confirmation -->
+<!-- match validation could use 1 or 2 params (match:field1 ...or... match:field1,Text to Display), if 2 params are passed it will use the 2nd param as text displayed -->
+<label for="input4">Password</label>
+<input type="password" name="input4" ng-model="form1.input4" validation="alpha|min_len:4|required"  />
+<span class="validation text-danger"></span>
+<label for="input4c">Password Confirmation</label>
+<input type="password" name="input4c" ng-model="form1.input4c" validation="match:form1.input4,Password|required"  />
+<span class="validation text-danger"></span>
+
+<!-- example 5 - with Regular Expression (Date Code of YYWW) -->
+<label for="input5">Multiple Validations + Custom Regex of Date Code (YYWW)</label>
+<input type="text" name="input5" ng-model="form1.input5" 
 		validation="exact_len:4|regex:YYWW:=^(0[9]|1[0-9]|2[0-9]|3[0-9])(5[0-2]|[0-4][0-9])$:regex|required|integer"  />
 <span class="validation text-danger"></span>
 
-<!-- example 5 - required select option (dropdown) -->
+<!-- example 6 - required select option (dropdown) -->
 <div class="form-group">
     <label for="select1">Select Option Required</label>           
     <select id="stk_type" name="stk_type" class="form-control" ng-model="form1.select1" validation="required">
@@ -154,6 +164,8 @@ Available Validators
 * `ipv4` Check for valid IP (IPv4)
 * `ipv6` Check for valid IP (IPv6)
 * `ipv6_hex` Check for valid IP (IPv6 Hexadecimal)
+* `match:n` Match another input field(n), where (n) must be the exact ngModel attribute of input field to compare to.
+* `match:n,t` Match another input field(n), same as (match:n) but also include (t) for alternative text to be displayed.
 * `max_len:n` Checks field length, no longer than specified length where (n) is length parameter.
 * `max_num:n` Checks numeric value to be lower or equal than the number (n).
 * `min_len:n` Checks field length, no shorter than specified length where (n) is length parameter.
@@ -201,8 +213,7 @@ License
 #### Any kind of help is welcome from the TODO list
 :memo: :point_up:
 
-* Add `same` and `different` validators (same password)
 * Add `street_address` validator
 * Add more validators...
-* Add more locale languages
+* Add more locale languages... I need your help on that one!!!
 * Add online demo
diff --git a/templates/testingForm.html b/templates/testingForm.html
@@ -92,6 +92,16 @@
             <input type="text" class="form-control" name="input14" placeholder="alpha|required" ng-model="form1.input14" validation="alpha|required" ng-disabled="true" />
             <span class="validation text-danger"></span>
         </div>
+        <div class="form-group">    
+            <label for="input15">{{ 'INPUT15' | translate }}</label>
+            <input type="password" class="form-control" name="input14" placeholder="alpha|min_len:3|required" ng-model="form1.input15" validation="alpha|min_len:3|required" />
+            <span class="validation text-danger"></span>
+        </div>
+        <div class="form-group">    
+            <label for="input16">{{ 'INPUT16' | translate }}</label>
+            <input type="password" class="form-control" name="input14" placeholder="match:form1.input15|required" ng-model="form1.input16" validation="match:form1.input15,Password|required" />
+            <span class="validation text-danger"></span>
+        </div>
         <div class="form-group">    
             <label for="area1">{{ 'AREA1' | translate }}</label>
             <textarea class="form-control" name="area1" rows="3" placeholder="alpha_dash_spaces|min_len:15|required" validation="alpha_dash_spaces|min_len:15|required" ng-model="form1.area1"></textarea>