🐛 bug(validator): fix dynamic custom validator error

Closes #274

src/directives/validate.js

@@ -98,10 +98,10 @@ export default function (Vue) {
     update (value, old) {
       if (!value || this._invalid) { return }
 
-      if (isPlainObject(value)) {
-        this.handleObject(value)
-      } else if (Array.isArray(value)) {
-        this.handleArray(value)
+      if (isPlainObject(value) || (old && isPlainObject(old))) {
+        this.handleObject(value, old)
+      } else if (Array.isArray(value) || (old && Array.isArray(old))) {
+        this.handleArray(value, old)
       }
 
       let options = { field: this.field, noopable: this._initialNoopValidation }
@@ -242,13 +242,17 @@ export default function (Vue) {
       this.anchor = null
     },
 
-    handleArray (value) {
+    handleArray (value, old) {
+      old && this.validation.resetValidation()
+
       each(value, (val) => {
         this.validation.setValidation(val)
       })
     },
 
-    handleObject (value) {
+    handleObject (value, old) {
+      old && this.validation.resetValidation()
+
       each(value, (val, key) => {
         if (isPlainObject(val)) {
           if ('rule' in val) {

src/validations/base.js

@@ -71,6 +71,14 @@ export default class BaseValidation {
     this._unwatch && this._unwatch()
   }
 
+  resetValidation () {
+    const keys = Object.keys(this._validators)
+    each(keys, (key, index) => {
+      this._validators[key] = null
+      delete this._validators[key]
+    })
+  }
+
   setValidation (name, arg, msg, initial) {
     let validator = this._validators[name]
     if (!validator) {

test/specs/issues.js

@@ -488,4 +488,85 @@ describe('github issues', () => {
       })
     })
   })
+
+  describe('#274', () => {
+    beforeEach((done) => {
+      el.innerHTML = `
+        <validator name="validation1">
+          <form novalidate>
+            <div class="inputs">
+              <input type="text" id="username" v-validate:username="customeValidator">
+              <input type="text" id="comment" v-validate:comment="{ maxlength: 4 }">
+            </div>
+            <div class="errors">
+              <p v-if="$validation1.username.required">Required your name.</p>
+              <p v-if="$validation1.comment.maxlength">Your comment is too long.</p>
+            </div>
+            <input type="submit" value="send" v-if="$validation1.valid">
+            <button id="buttonCustom1" type="button" @click="onCustomValidator1">custom1</button>
+            <button id="buttonCustom2" type="button" @click="onCustomValidator2">custom2</button>
+          </form>
+        </validator>
+      `
+      vm = new Vue({
+        el,
+        data: {
+          customeValidator: ['custom1']
+        },
+        validators: {
+          custom1 (val) {
+            return val === 'custom1'
+          },
+          custom2 (val) {
+            return val === 'custom2'
+          }
+        },
+        methods: {
+          onCustomValidator1 () {
+            this.customeValidator = ['custom1']
+          },
+          onCustomValidator2 () {
+            this.customeValidator = ['custom2']
+          }
+        }
+      })
+      vm.$nextTick(done)
+    })
+
+    it('should be validated', (done) => {
+      let username = el.querySelector('#username')
+      let buttonCustom2 = el.querySelector('#buttonCustom2')
+
+      assert(vm.$validation1.invalid === true)
+      assert(vm.$validation1.username.custom1 === true)
+      assert(vm.$validation1.username.custom2 === undefined)
+
+      username.value = 'custom1'
+      trigger(username, 'input')
+      trigger(username, 'blur')
+      vm.$nextTick(() => {
+        assert(vm.$validation1.valid === true)
+        assert(vm.$validation1.username.custom1 === false)
+        assert(vm.$validation1.username.custom2 === undefined)
+
+        buttonCustom2.click()
+        vm.$nextTick(() => {
+          assert(vm.$validation1.invalid === true)
+          assert(vm.$validation1.username.custom1 === undefined)
+          assert(vm.$validation1.username.custom2 === true)
+
+          username.value = 'custom2'
+          trigger(username, 'input')
+          trigger(username, 'blur')
+          vm.$nextTick(() => {
+            assert(vm.$validation1.valid === true)
+            assert(vm.$validation1.username.custom1 === undefined)
+            assert(vm.$validation1.username.custom2 === false)
+
+            done()
+          })
+        })
+      })
+    })
+  })
 })