Support for multiple validators on a single input #5

Squashed commit of the following: commit e4b848b Author: Huei Tan <[email protected]> Date: Sat Aug 23 20:52:35 2014 +0800 Add multiple validation DEMO and API documentation commit f60ecf6 Author: Huei Tan <[email protected]> Date: Sat Aug 23 20:40:54 2014 +0800 Allow multiple validators #5 commit 744c2e6 Author: Huei Tan <[email protected]> Date: Thu Aug 21 11:04:34 2014 +0800 Remove multiple validator (temporarily)
hueitan · Aug 23, 2014 · 911b791 · 911b791
1 parent 18c9a30
commit 911b791
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 25 deletions.
diff --git a/API.md b/API.md
@@ -239,3 +239,11 @@ Easily disable success/error message
 }]);
 ```
 
+**multiple validators**<br/>
+use commar as splitter
+
+```html
+<input type="text" validator="required, url" name="url" ng-model="form.url"/>
+```
+
+
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -93,6 +93,6 @@ module.exports = function(grunt) {
     // Register Task
     grunt.registerTask('dev', ['browserSync', 'watch']);
     grunt.registerTask('build', ['clean', 'concat', 'uglify']);
-    grunt.registerTask('check', ['jshint', 'jsbeautifier']); // use this before commit
+    grunt.registerTask('check', ['jshint', 'jsbeautifier', 'build']); // use this before commit
 
 };
diff --git a/README.md b/README.md
@@ -56,7 +56,7 @@ Writing your First Code
         </div>
         <div>
             <label>Url</label>
-            <input type="text" name="url" ng-model="form.url" validator="url">
+            <input type="text" name="required, url" ng-model="form.url" validator="url">
         </div>
         <button validation-submit="Form" ng-click="next()">Submit</button>
         <button validation-reset="Form">Reset</button>

diff --git a/dist/angular-validation.js b/dist/angular-validation.js
@@ -351,21 +351,30 @@
                  * @returns {}
                  */
                 var checkValidation = function(scope, element, attrs, ctrl, validation, value) {
-                    var successMessage = validation + 'SuccessMessage',
+
+                    var validators = validation.slice(0),
+                        validator = validators[0].trim(),
+                        leftValidation = validators.slice(1),
+                        successMessage = validation + 'SuccessMessage',
                         errorMessage = validation + 'ErrorMessage',
-                        expressionType = $validationProvider.getExpression(validation).constructor,
+                        expressionType = $validationProvider.getExpression(validator).constructor,
                         valid = {
                             success: function() {
-                                return validFunc(element, attrs[successMessage], validation, scope.validCallback, ctrl);
+                                validFunc(element, attrs[successMessage], validator, scope.validCallback, ctrl);
+                                if (leftValidation.length) {
+                                    checkValidation(scope, element, attrs, ctrl, leftValidation, value);
+                                } else {
+                                    return true;
+                                }
                             },
                             error: function() {
-                                return invalidFunc(element, attrs[errorMessage], validation, scope.invalidCallback, ctrl);
+                                return invalidFunc(element, attrs[errorMessage], validator, scope.invalidCallback, ctrl);
                             }
                         };
 
                     // Check with Function
                     if (expressionType === Function) {
-                        return $q.all([$validationProvider.getExpression(validation)(value, scope, element, attrs)])
+                        return $q.all([$validationProvider.getExpression(validator)(value, scope, element, attrs)])
                             .then(function(data) {
                                 if (data && data.length > 0 && data[0]) {
                                     return valid.success();
@@ -378,7 +387,7 @@
                     }
                     // Check with RegExp
                     else if (expressionType === RegExp) {
-                        return $validationProvider.getExpression(validation).test(value) ? valid.success() : valid.error();
+                        return $validationProvider.getExpression(validator).test(value) ? valid.success() : valid.error();
                     } else {
                         return valid.error();
                     }
@@ -419,11 +428,11 @@
 
                         /**
                          * validator
-                         * @type {*|Array}
+                         * @type {Array}
                          *
                          * Convert user input String to Array
                          */
-                        var validator = attrs.validator.split(',');
+                        var validation = attrs.validator.split(',');
 
                         /**
                          * guid use
@@ -471,10 +480,10 @@
                         });
 
                         /**
-                         * Check Every validator
+                         * Check validator
                          */
-                        validator.forEach(function(validation) {
 
+                        (function() {
                             /**
                              * Click submit form, check the validity when submit
                              */
@@ -556,7 +565,7 @@
                                 checkValidation(scope, element, attrs, ctrl, validation, value);
                             });
 
-                        });
+                        })();
 
                         $timeout(function() {
                             /**

diff --git a/dist/angular-validation.min.js b/dist/angular-validation.min.js
diff --git a/index.html b/index.html
@@ -178,6 +178,12 @@ <h1>Angular Validation.
                         <input type="text" validator="range" name="range" ng-model="form4.range" placeholder="number 5~10" min="5" max="10">
                     </div>
                 </div>
+
+                <div class="row collapse">
+                    <div class="small-12 columns">
+                        <input type="text" validator="required, range" name="multiple" ng-model="form4.multiple" placeholder='number 5~10 with required (validator="required, range")'  min="5" max="10">
+                    </div>
+                </div>
             </fieldset>
         </form>
     </div>