New Features validation-submit & validation-reset

hueitan · Jun 11, 2014 · b1d4a54 · b1d4a54
1 parent 1ce6869
commit b1d4a54
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -123,6 +123,25 @@ Writing your Code
     };
     // ...
 </script>
+
+<!-- In angular validation 1.2.0
+     More easy, more clean in your js code -->
+
+<form name="Form">
+    <input type="text" name="number" ng-model="form.number" validator="number" valid-method="submit-only"/>
+    <button validation-submit="Form" ng-click="form.submit()"></button>
+</form>
+
+<script>
+    // Don't need include $validationProvider.validate() anymore
+    $scope.form = {
+        submit: function () {
+            // your ng-click success callback
+        }
+    };
+</script>
+
+<!-- Clean, right ? -->
 ```
 
 **Setup a new Validation `setExpression()` `setDefaultMsg()` with `RegExp` or `Function` in config phase**
@@ -189,6 +208,8 @@ angular.module('yourApp', ['validation'])
     <button ng-disabled="form.checkValid(Form)"></button>
     <!-- Reset the specific Form -->
     <button ng-click="form.reset(Form)"></button>
+    <!-- Clean Reset (angular validation 1.2.0) -->
+    <button validation-reset="Form"></button>
 </form>
 ```
 
@@ -199,6 +220,11 @@ angular.module('yourApp', ['validation'])
     $scope.form.reset = function (form) {
         validationProvider.reset(form);
     };
+    // ... angular validation 1.2.0 reset
+    $scope.form.reset = function () {
+        // Don't need include validationProvider.reset();
+        // Focus on your ng-click action
+    };
 ```
 
 **Set the valid/invalid message style CSS**

diff --git a/demo/demo.js b/demo/demo.js
@@ -92,11 +92,13 @@
             $scope.form = {
                 requiredCallback: 'required',
                 checkValid: $validationProvider.checkValid,
-                submit: function (form) {
-                    $validationProvider.validate(form);
+                submit: function () {
+                    // angular validation 1.2 can reduce this procedure, just focus on your action
+                    // $validationProvider.validate(form);
                 },
-                reset: function (form) {
-                    $validationProvider.reset(form);
+                reset: function () {
+                    // angular validation 1.2 can reduce this procedure, just focus on your action
+                    // $validationProvider.reset(form);
                 }
             };
 

diff --git a/dist/angular-validation.js b/dist/angular-validation.js
@@ -530,5 +530,53 @@
 
                 }
             };
+        }])
+
+        .directive('validationSubmit', ['$injector', function ($injector) {
+
+            var $validationProvider = $injector.get('$validation'),
+                $timeout = $injector.get('$timeout'),
+                $parse = $injector.get('$parse');
+
+            return {
+                priority: 1, // execute before ng-click (0)
+                terminal: true,
+                link: function postLink(scope, element, attrs) {
+                    var form = attrs.validationSubmit;
+
+                    $timeout(function () {
+                        element.on('click', function (e) {
+                            e.preventDefault();
+
+                            $validationProvider.validate(scope[form])
+                                .success(function () {
+                                    $parse(attrs.ngClick)(scope);
+                                });
+                        });
+                    });
+
+                }
+            }
+        }])
+
+        .directive('validationReset', ['$injector', function ($injector) {
+
+            var $validationProvider = $injector.get('$validation'),
+                $timeout = $injector.get('$timeout');
+
+            return {
+                link: function postLink(scope, element, attrs) {
+                    var form = attrs.validationReset;
+
+                    $timeout(function () {
+                        element.on('click', function (e) {
+                            e.preventDefault();
+                            $validationProvider.reset(scope[form]);
+                        });
+                    });
+
+                }
+            }
         }]);
+
 }).call(this);
diff --git a/dist/angular-validation.min.js b/dist/angular-validation.min.js
diff --git a/index.html b/index.html
@@ -72,8 +72,8 @@ <h1>Angular Validation.
             </fieldset>
 
             <ul class="button-group">
-                <li><button class="button" ng-click="form.submit(Form)">Submit</button></li>
-                <li><button class="button alert" ng-click="form.reset(Form)">Reset</button></li>
+                <li><button class="button" validation-submit="Form" ng-click="form.submit()">Submit</button></li>
+                <li><button class="button alert" validation-reset="Form" ng-click="form.reset()">Reset</button></li>
                 <li><button class="button secondary" ng-disabled="!form.checkValid(Form)">checkValid = {{ form.checkValid(Form) }}</button></li>
             </ul>
             <!--<pre>{{ form | json }}</pre>-->

diff --git a/src/directive.js b/src/directive.js
@@ -267,5 +267,53 @@
 
                 }
             };
+        }])
+
+        .directive('validationSubmit', ['$injector', function ($injector) {
+
+            var $validationProvider = $injector.get('$validation'),
+                $timeout = $injector.get('$timeout'),
+                $parse = $injector.get('$parse');
+
+            return {
+                priority: 1, // execute before ng-click (0)
+                terminal: true,
+                link: function postLink(scope, element, attrs) {
+                    var form = attrs.validationSubmit;
+
+                    $timeout(function () {
+                        element.on('click', function (e) {
+                            e.preventDefault();
+
+                            $validationProvider.validate(scope[form])
+                                .success(function () {
+                                    $parse(attrs.ngClick)(scope);
+                                });
+                        });
+                    });
+
+                }
+            }
+        }])
+
+        .directive('validationReset', ['$injector', function ($injector) {
+
+            var $validationProvider = $injector.get('$validation'),
+                $timeout = $injector.get('$timeout');
+
+            return {
+                link: function postLink(scope, element, attrs) {
+                    var form = attrs.validationReset;
+
+                    $timeout(function () {
+                        element.on('click', function (e) {
+                            e.preventDefault();
+                            $validationProvider.reset(scope[form]);
+                        });
+                    });
+
+                }
+            }
         }]);
+
 }).call(this);