🐛 bug(validate): fix multi element fragment bug

Fixes #243

Author: kazupon

src/directives/validate.js

@@ -141,7 +141,7 @@ export default function (Vue) {
       this.field = camelize(this.arg ? this.arg : params.field)
 
       this.validation = validator.manageValidation(
-        this.field, model, this.vm, this.frag.node, 
+        this.field, model, this.vm, this.getElementFrom(this.frag), 
         this._scope, filters, params.initial,
         this.isDetectBlur(params.detectBlur), 
         this.isDetectChange(params.detectChange)
@@ -159,7 +159,7 @@ export default function (Vue) {
     listen () {
       const model = this.model
       const validation = this.validation
-      const el = this.frag.node
+      const el = this.getElementFrom(this.frag)
 
       this.onBlur = bind(validation.listener, validation)
       on(el, 'blur', this.onBlur)
@@ -184,7 +184,7 @@ export default function (Vue) {
     },
 
     unlisten () {
-      const el = this.frag.node
+      const el = this.getElementFrom(this.frag)
 
       if (this.onInput) {
         off(el, 'input', this.onInput)
@@ -209,7 +209,7 @@ export default function (Vue) {
 
     teardownValidate () {
       if (this.validator && this.validation) {
-        let el = this.frag.node
+        const el = this.getElementFrom(this.frag)
 
         this.params.group 
           && this.validator.removeGroupValidation(this.params.group, this.field)
@@ -289,6 +289,10 @@ export default function (Vue) {
         }
       }
       return ret
+    },
+
+    getElementFrom (frag) {
+      return frag.single ? frag.node : frag.node.nextSibling
     }
   })
 }

test/specs/issues.js

@@ -452,4 +452,40 @@ describe('github issues', () => {
       })
     })
   })
+
+  describe('#243', () => {
+    beforeEach((done) => {
+      el.innerHTML = `
+        <validator name="validator1">
+          <form novalidate>
+            <input type="text" v-pickadate="'date'" v-validate:name="['required']">
+          </form>
+        </validator>
+      `
+      vm = new Vue({
+        el,
+        directives: {
+          pickadate: {
+            bind () {
+              const elm = document.createElement('div')
+              elm.innerHTML = '<p>hello world</p>'
+              Vue.util.after(elm, this.el)
+            }
+          }
+        }
+      })
+      vm.$nextTick(done)
+    })
+
+    it('should be validated', (done) => {
+      const field1 = vm.$el.querySelector('input')
+      field1.value = 'hello'
+      trigger(field1, 'input')
+      trigger(field1, 'blur')
+      vm.$nextTick(() => {
+        assert(vm.$validator1.name.required === false)
+        done()
+      })
+    })
+  })
 })