feat(v-validate): add 'initial' params

Closes #58

src/directives/validate.js

@@ -15,7 +15,7 @@ export default function (Vue) {
 
   Vue.directive('validate', {
     priority: vIf.priority + 1,
-    params: ['group', 'field', 'detect-blur', 'detect-change'],
+    params: ['group', 'field', 'detect-blur', 'detect-change', 'initial'],
 
     paramWatchers: {
       detectBlur (val, old) {
@@ -61,7 +61,10 @@ export default function (Vue) {
         this.handleArray(value)
       }
 
-      this.validator.validate(this.field)
+      this.validator.validate({ field: this.field, noopable: this._initialNoopValidation })
+      if (this._initialNoopValidation) {
+        this._initialNoopValidation = null
+      }
     },
 
     unbind () {
@@ -86,6 +89,8 @@ export default function (Vue) {
 
       params.group
         && validator.addGroupValidation(params.group, this.field)
+
+      this._initialNoopValidation = this.isInitialNoopValidation(params.initial)
     },
 
     listen () {
@@ -201,6 +206,10 @@ export default function (Vue) {
     isDetectChange (detectChange) {
       return detectChange === undefined 
         || detectChange === 'on' || detectChange === true
+    },
+
+    isInitialNoopValidation (initial) {
+      return initial === 'off' || initial === false
     }
   })
 }

src/validations/base.js

@@ -118,7 +118,7 @@ export default class BaseValidation {
     this._validator.validate(this.field)
   }
 
-  validate (cb) {
+  validate (cb, noopable = false) {
     const _ = util.Vue.util
 
     let results = {}
@@ -145,6 +145,11 @@ export default class BaseValidation {
         msg = descriptor.msg
       }
 
+      if (noopable) {
+        results[name] = false
+        return done()
+      }
+
       if (validator) {
         let value = this._getValue(this._el)
         this._invokeValidator(this._vm, validator, value, descriptor.arg, (ret, err) => {

src/validations/checkbox.js

@@ -45,7 +45,7 @@ export default class CheckboxValidation extends BaseValidation {
         })
       }
     } else {
-      this._validator.validate(this.field)
+      this._validator.validate({ field: this.field })
     }
   }
 
@@ -64,7 +64,7 @@ export default class CheckboxValidation extends BaseValidation {
     if (found === -1) { return }
 
     this._inits.splice(found, 1)
-    this._validator.validate(this.field)
+    this._validator.validate({ field: this.field })
   }
 
   willUpdateFlags () {

src/validations/radio.js

@@ -30,7 +30,7 @@ export default class RadioValidation extends BaseValidation {
         }
       })
     } else {
-      this._validator.validate(this.field)
+      this._validator.validate({ field: this.field })
     }
   }
 
@@ -44,7 +44,7 @@ export default class RadioValidation extends BaseValidation {
     if (found === -1) { return }
 
     this._inits.splice(found, 1)
-    this._validator.validate(this.field)
+    this._validator.validate({ field: this.field })
   }
 
   willUpdateFlags () {

src/validator.js

@@ -46,7 +46,21 @@ export default class Validator {
 
     // define the validate manually meta method to vue instance
     vm.$validate = (...args) => {
-      this.validate(...args)
+      let field = null
+      let touched = false
+      let cb = null
+
+      each(args, (arg, index) => {
+        if (typeof arg === 'string') {
+          field = arg
+        } else if (typeof arg === 'boolean') {
+          touched = arg
+        } else if (typeof arg === 'function') {
+          cb = arg
+        }
+      })
+
+      this.validate({ field: field, touched: touched, cb: cb })
     }
 
     // define manually the validation errors
@@ -155,28 +169,14 @@ export default class Validator {
     validations && pull(validations, validation)
   }
 
-  validate (...args) {
-    let field = null
-    let touched = false
-    let cb = null
-
-    each(args, (arg, index) => {
-      if (typeof arg === 'string') {
-        field = arg
-      } else if (typeof arg === 'boolean') {
-        touched = arg
-      } else if (typeof arg === 'function') {
-        cb = arg
-      }
-    })
-
+  validate ({ field = null, touched = false, noopable = false, cb = null } = {}) {
     if (!field) { // all
       each(this.validations, (validation, key) => {
         validation.willUpdateFlags(touched)
       })
       this._validates(cb)
     } else { // each field
-      this._validate(field, touched, cb)
+      this._validate(field, touched, noopable, cb)
     }
   }
 
@@ -201,7 +201,7 @@ export default class Validator {
     }
   }
 
-  _validate (field, touched = false, cb = null) {
+  _validate (field, touched = false, noopable = false, cb = null) {
     const scope = this._scope
 
     let validation = this._getValidationFrom(field)
@@ -211,7 +211,7 @@ export default class Validator {
         util.Vue.set(scope, field, results)
         this._fireEvents()
         cb && cb()
-      })
+      }, noopable)
     }
   }
 

test/specs/directives/validate.js

@@ -806,6 +806,43 @@ describe('validate directive', () => {
 
 
   describe('params', () => {
+    describe('initial', () => {
+      beforeEach((done) => {
+        el.innerHTML = '<validator name="validator1">'
+          + '<form novalidate>'
+          + '<input type="text" initial="off" v-validate:field1="{ required: true, minlength: 5 }">'
+          + '</form>'
+          + '</validator>'
+        vm = new Vue({ el: el })
+        vm.$nextTick(done)
+      })
+
+      it('should not run validation', (done) => {
+        let field = el.getElementsByTagName('input')[0]
+
+        // default
+        assert(vm.$validator1.field1.required === false) // default validation success
+        assert(vm.$validator1.field1.minlength === false) // default validation success
+        assert(vm.$validator1.field1.valid === true)
+        assert(vm.$validator1.field1.touched === false)
+        assert(vm.$validator1.field1.modified === false)
+        assert(vm.$validator1.field1.dirty === false)
+
+        // occured blur
+        trigger(field, 'blur')
+        vm.$nextTick(() => {
+          assert(vm.$validator1.field1.required === true)
+          assert(vm.$validator1.field1.minlength === true)
+          assert(vm.$validator1.field1.valid === false)
+          assert(vm.$validator1.field1.touched === true)
+          assert(vm.$validator1.field1.modified === false)
+          assert(vm.$validator1.field1.dirty === false)
+
+          done()
+        })
+      })
+    })
+
     describe('detect-blur', () => {
       beforeEach((done) => {
         el.innerHTML = '<validator name="validator1">'

test/specs/event.js

@@ -165,7 +165,6 @@ describe('event', () => {
           input1.value = 'foo'
           input2.value = 'bar'
           trigger(input1, 'input')
-          trigger(input2, 'input')
         })
       })
     })