feat(api): update $validate API

kazupon · Feb 27, 2016 · 4635ce4 · 4635ce4
1 parent 46d153e
commit 4635ce4
Show file tree

Hide file tree

Showing 3 changed files with 156 additions and 23 deletions.
diff --git a/src/validations/base.js b/src/validations/base.js
@@ -76,7 +76,10 @@ export default class BaseValidation {
     }
   }
 
-  willUpdateFlags () {
+  willUpdateFlags (touched = false) {
+    if (touched) {
+      this.willUpdateTouched(this._el, 'blur')
+    }
     this.willUpdateDirty(this._el)
     this.willUpdateModified(this._el)
   }

diff --git a/src/validator.js b/src/validator.js
@@ -43,8 +43,22 @@ export default class Validator {
     }
 
     // define the validate manually meta method to vue instance
-    this._dir.vm.$validate = (field) => {
-      this._validate(field)
+    this._dir.vm.$validate = (...args) => {
+      let field = null
+      let touched = false
+
+      if (args.length === 1) {
+        if (typeof args[0] === 'string') {
+          field = args[0]
+        } else if (typeof args[0] === 'boolean') {
+          touched = args[0]
+        }
+      } else if (args.length === 2) {
+        field = args[0]
+        touched = args[1]
+      }
+
+      this._validate(field, touched)
     }
 
     // define manually the validation errors
@@ -79,30 +93,37 @@ export default class Validator {
     }, this)
   }
 
-  _validate (field) {
-    let validation = this._validations[field]
-    if (!validation && this._checkboxValidations[field]) {
-      validation = this._checkboxValidations[field].validation
-    } else if (!validation && this._radioValidations[field]) {
-      validation = this._radioValidations[field].validation
-    }
+  _validate (field, touched) {
+    if (!field) { // all
+      each(this.validations, (validation, key) => {
+        validation.willUpdateFlags(touched)
+      })
+      this.validate()
+    } else { // each field
+      let validation = this._validations[field]
+      if (!validation && this._checkboxValidations[field]) {
+        validation = this._checkboxValidations[field].validation
+      } else if (!validation && this._radioValidations[field]) {
+        validation = this._radioValidations[field].validation
+      }
 
-    if (validation) {
-      validation.willUpdateFlags()
-      let res = validation.validate()
-      util.Vue.set(this._scope, field, res)
+      if (validation) {
+        validation.willUpdateFlags(touched)
+        let res = validation.validate()
+        util.Vue.set(this._scope, field, res)
 
-      if (this._scope.dirty) {
-        this._fireEvent('dirty')
-      }
+        if (this._scope.dirty) {
+          this._fireEvent('dirty')
+        }
 
-      if (this._modified !== this._scope.modified) {
-        this._fireEvent('modified', this._scope.modified)
-        this._modified = this._scope.modified
-      }
+        if (this._modified !== this._scope.modified) {
+          this._fireEvent('modified', this._scope.modified)
+          this._modified = this._scope.modified
+        }
 
-      let valid = this._scope.valid
-      this._fireEvent((valid ? 'valid' : 'invalid'))
+        let valid = this._scope.valid
+        this._fireEvent((valid ? 'valid' : 'invalid'))
+      }
     }
   }
 

diff --git a/test/specs/validate.js b/test/specs/validate.js
@@ -248,4 +248,113 @@ describe('$validate', () => {
       })
     })
   })
+
+
+  describe('arguments', () => {
+    beforeEach((done) => {
+      el.innerHTML = 
+        '<validator name="validator1">' +
+        '<form novalidate>' +
+        '<input type="number" v-validate:field1="{ required: true, min: 0, max: 10 }">' +
+        '<input type="text" value="hello" v-validate:field2="{ minlength: 4 }">' +
+        '</form>' +
+        '</validator>'
+      vm = new Vue({ el: el })
+      vm.$nextTick(done)
+    })
+
+    describe('not specify', () => {
+      it('should be validated', (done) => {
+        assert(vm.$validator1.field1.required)
+        assert(vm.$validator1.field1.min === false)
+        assert(vm.$validator1.field1.max === false)
+        assert(vm.$validator1.field1.valid === false)
+        assert(vm.$validator1.field1.dirty === false)
+        assert(vm.$validator1.field1.modified === false)
+        assert(vm.$validator1.field1.touched === false)
+        assert(vm.$validator1.field2.minlength === false)
+        assert(vm.$validator1.field2.valid === true)
+        assert(vm.$validator1.field2.dirty === false)
+        assert(vm.$validator1.field2.modified === false)
+        assert(vm.$validator1.field2.touched === false)
+        assert(vm.$validator1.valid === false)
+        assert(vm.$validator1.dirty === false)
+        assert(vm.$validator1.modified === false)
+        assert(vm.$validator1.touched === false)
+
+        let field1 = el.getElementsByTagName('input')[0]
+        let field2 = el.getElementsByTagName('input')[1]
+        field1.value = '11'
+        field2.value = 'hi'
+        vm.$nextTick(() => {
+          vm.$validate()
+
+          assert(vm.$validator1.field1.required === false)
+          assert(vm.$validator1.field1.min === false)
+          assert(vm.$validator1.field1.max === true)
+          assert(vm.$validator1.field1.valid === false)
+          assert(vm.$validator1.field1.dirty === true)
+          assert(vm.$validator1.field1.modified === true)
+          assert(vm.$validator1.field1.touched === false)
+          assert(vm.$validator1.field2.minlength === true)
+          assert(vm.$validator1.field2.valid === false)
+          assert(vm.$validator1.field2.dirty === true)
+          assert(vm.$validator1.field2.modified === true)
+          assert(vm.$validator1.field2.touched === false)
+          assert(vm.$validator1.valid === false)
+          assert(vm.$validator1.dirty === true)
+          assert(vm.$validator1.modified === true)
+          assert(vm.$validator1.touched === false)
+
+          done()
+        })
+      })
+    })
+
+    describe('touched', () => {
+      it('should be validated', (done) => {
+        assert(vm.$validator1.field1.required)
+        assert(vm.$validator1.field1.min === false)
+        assert(vm.$validator1.field1.max === false)
+        assert(vm.$validator1.field1.valid === false)
+        assert(vm.$validator1.field1.dirty === false)
+        assert(vm.$validator1.field1.modified === false)
+        assert(vm.$validator1.field1.touched === false)
+        assert(vm.$validator1.field2.minlength === false)
+        assert(vm.$validator1.field2.valid === true)
+        assert(vm.$validator1.field2.dirty === false)
+        assert(vm.$validator1.field2.modified === false)
+        assert(vm.$validator1.field2.touched === false)
+        assert(vm.$validator1.valid === false)
+        assert(vm.$validator1.dirty === false)
+        assert(vm.$validator1.modified === false)
+        assert(vm.$validator1.touched === false)
+
+        let field2 = el.getElementsByTagName('input')[1]
+        field2.value = 'hi'
+        vm.$nextTick(() => {
+          vm.$validate('field2', true)
+
+          assert(vm.$validator1.field1.required)
+          assert(vm.$validator1.field1.min === false)
+          assert(vm.$validator1.field1.max === false)
+          assert(vm.$validator1.field1.valid === false)
+          assert(vm.$validator1.field1.dirty === false)
+          assert(vm.$validator1.field1.modified === false)
+          assert(vm.$validator1.field1.touched === false)
+          assert(vm.$validator1.field2.minlength === true)
+          assert(vm.$validator1.field2.valid === false)
+          assert(vm.$validator1.field2.dirty === true)
+          assert(vm.$validator1.field2.modified === true)
+          assert(vm.$validator1.field2.touched === true)
+          assert(vm.$validator1.valid === false)
+          assert(vm.$validator1.dirty === true)
+          assert(vm.$validator1.modified === true)
+          assert(vm.$validator1.touched === true)
+
+          done()
+        })
+      })
+    })
+  })
 })