Differentiate submit submit-only method #4

Due to issue #4
Adding `submit` to validate after submit
Adding `submit-only` to validate after only click submit

Author: hueitan

README.md

@@ -87,7 +87,7 @@ Writing your Code
 <input type="text" name="requiredCallback" ng-model="form.requiredCallback" validator="required" invalid-callback='error("Must be Required");'/>
 ```
 
-**Select the validation method `watch` `blur` `submit`, default as `watch`** <br/>
+**Select the validation method `watch` `blur` `submit` `submit-only`, default as `watch`** <br/>
 `validationProvider.validate(form).success(callback).error(callback)` use callback to continue your submit
 
 ```html
@@ -103,6 +103,13 @@ Writing your Code
     <input type="text" name="number" ng-model="form.number" validator="number" valid-method="submit"/>
     <button ng-click="form.submit(Form)"></button>
 </form>
+
+<label>Submit Only method</label>
+<form name="Form">
+    <input type="text" name="number" ng-model="form.number" validator="number" valid-method="submit-only"/>
+    <button ng-click="form.submit(Form)"></button>
+</form>
+
 <script>
     // ... validate method, it will check `checkValid(Form)`
     $scope.form = {

demo/demo.js

@@ -49,6 +49,16 @@ angular.module('myApp', ['validation'])
             }
         };
 
+        $scope.form5 = {
+            checkValid: $validationProvider.checkValid,
+            submit: function (form) {
+                $validationProvider.validate(form);
+            },
+            reset: function (form) {
+                $validationProvider.reset(form);
+            }
+        };
+
         // Callback method
         $scope.success = function (message) {
             alert('Success ' + message);

dist/angular-validation.js

@@ -357,6 +357,17 @@
                     invalidCallback: '&'
                 },
                 link: function (scope, element, attrs, ctrl) {
+
+                    /**
+                     * watch
+                     * @type {watch}
+                     *
+                     * Use to collect scope.$watch method
+                     *
+                     * use watch() to destroy the $watch method
+                     */
+                    var watch = function () {};
+
                     /**
                      * validator
                      * @type {*|Array}
@@ -365,7 +376,6 @@
                      */
                     var validator = attrs.validator.split(',');
 
-
                     /**
                      * Valid/Invalid Message
                      */
@@ -380,6 +390,15 @@
                      * Reset the validation for specific form
                      */
                     scope.$on(ctrl.$name + 'reset', function () {
+
+                        /**
+                         * clear scope.$watch here
+                         * when reset status
+                         * clear the $watch method to prevent
+                         * $watch again while reset the form
+                         */
+                        watch();
+
                         ctrl.$setViewValue(null);
                         ctrl.$setPristine();
                         ctrl.$setValidity(ctrl.$name, false);
@@ -397,6 +416,25 @@
                          */
                         scope.$on(ctrl.$name + 'submit', function () {
                             var value = element[0].value;
+
+                            if (attrs.validMethod === 'submit') {
+
+                                watch(); // clear previous scope.$watch
+                                watch = scope.$watch('model', function (value) {
+
+                                    // scope.$watch will translate '' to undefined
+                                    // undefined will pass the required submit /^.+/
+                                    // cause some error in this validation
+                                    if (value === undefined) {
+                                        value = '';
+                                    }
+
+                                    checkValidation(scope, element, attrs, ctrl, validation, value);
+                                });
+
+                                return;
+                            }
+
                             checkValidation(scope, element, attrs, ctrl, validation, value);
                         });
 
@@ -415,9 +453,9 @@
                         }
 
                         /**
-                         * Validate submit method
+                         * Validate submit & submit-only method
                          */
-                        if (attrs.validMethod === 'submit') {
+                        if (attrs.validMethod === 'submit' || attrs.validMethod === 'submit-only') {
                             return;
                         }
 

dist/angular-validation.min.js

@@ -12,13 +12,15 @@
 <div class="row">
     <div class="small-12 medium-12 large-12 large-centered columns">
         <h1>Angular Validation.
+
             <small>
                 <a href="#form1">Watch</a>.
                 <a href="#form2">Blur</a>.
                 <a href="#form3">Submit</a>.
-                method.
+                <a href="#form5">Submit-only</a>.
+                <!--method.-->
                 <a href="#form4">Additions</a>.
-                validation
+                <!--validation-->
             </small>
         </h1>
     </div>
@@ -176,6 +178,27 @@ <h1>Angular Validation.
     </div>
 </div>
 
+<div class="row">
+    <div class="small-12 medium-12 large-6 columns">
+        <form name="Form5" id="form5">
+            <fieldset>
+                <legend>Form ($submit-only)</legend>
+                <label>Required</label>
+                <input type="text" name="emailSubmitOnly" ng-model="form5.required" validator="required" valid-method="submit-only"/>
+                <label>Email</label>
+                <input type="text" name="emailSubmitOnly" ng-model="form5.email" validator="email" valid-method="submit-only"/>
+            </fieldset>
+
+            <ul class="button-group">
+                <li><button class="button" ng-click="form5.submit(Form5)">Submit</button></li>
+                <li><button class="button alert" ng-click="form5.reset(Form5)">Reset</button></li>
+                <li><button class="button secondary" ng-disabled="!form5.checkValid(Form5)">checkValid = {{ form2.checkValid(Form2) }}</button></li>
+            </ul>
+            <!-- <pre>{{ form | json }}</pre> -->
+        </form>
+    </div>
+</div>
+
 <a href="https://github.com/huei90/angular-validation"><img src="demo/iconmonstr-github-10-icon-128.png" id="github-link" alt="Fork me on Github"/></a>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
 <script src="dist/angular-validation.js"></script>

index.html

@@ -100,6 +100,17 @@
                     invalidCallback: '&'
                 },
                 link: function (scope, element, attrs, ctrl) {
+
+                    /**
+                     * watch
+                     * @type {watch}
+                     *
+                     * Use to collect scope.$watch method
+                     *
+                     * use watch() to destroy the $watch method
+                     */
+                    var watch = function () {};
+
                     /**
                      * validator
                      * @type {*|Array}
@@ -108,7 +119,6 @@
                      */
                     var validator = attrs.validator.split(',');
 
-
                     /**
                      * Valid/Invalid Message
                      */
@@ -123,6 +133,15 @@
                      * Reset the validation for specific form
                      */
                     scope.$on(ctrl.$name + 'reset', function () {
+
+                        /**
+                         * clear scope.$watch here
+                         * when reset status
+                         * clear the $watch method to prevent
+                         * $watch again while reset the form
+                         */
+                        watch();
+
                         ctrl.$setViewValue(null);
                         ctrl.$setPristine();
                         ctrl.$setValidity(ctrl.$name, false);
@@ -140,6 +159,25 @@
                          */
                         scope.$on(ctrl.$name + 'submit', function () {
                             var value = element[0].value;
+
+                            if (attrs.validMethod === 'submit') {
+
+                                watch(); // clear previous scope.$watch
+                                watch = scope.$watch('model', function (value) {
+
+                                    // scope.$watch will translate '' to undefined
+                                    // undefined will pass the required submit /^.+/
+                                    // cause some error in this validation
+                                    if (value === undefined) {
+                                        value = '';
+                                    }
+
+                                    checkValidation(scope, element, attrs, ctrl, validation, value);
+                                });
+
+                                return;
+                            }
+
                             checkValidation(scope, element, attrs, ctrl, validation, value);
                         });
 
@@ -158,9 +196,9 @@
                         }
 
                         /**
-                         * Validate submit method
+                         * Validate submit & submit-only method
                          */
-                        if (attrs.validMethod === 'submit') {
+                        if (attrs.validMethod === 'submit' || attrs.validMethod === 'submit-only') {
                             return;
                         }