diff --git a/src/validations/base.js b/src/validations/base.js
index 0bd0dbc..b296b3b 100644
--- a/src/validations/base.js
+++ b/src/validations/base.js
@@ -58,7 +58,7 @@ export default class BaseValidation {
return
}
- this.handleValidate(el, this._initial)
+ this.handleValidate(el, { noopable: this._initial })
if (this._initial) {
this._initial = null
}
diff --git a/src/validations/select.js b/src/validations/select.js
index 669d0e7..82eb766 100644
--- a/src/validations/select.js
+++ b/src/validations/select.js
@@ -38,7 +38,7 @@ export default class SelectValidation extends BaseValidation {
return
}
- this.handleValidate(el, this._initial)
+ this.handleValidate(el, { noopable: this._initial })
if (this._initial) {
this._initial = null
}
diff --git a/test/specs/issues.js b/test/specs/issues.js
index 712aabf..fdebcd9 100644
--- a/test/specs/issues.js
+++ b/test/specs/issues.js
@@ -1,5 +1,6 @@
import assert from 'power-assert'
import Vue from 'vue'
+import { trigger } from '../../src/util'
describe('github issues', () => {
@@ -122,4 +123,249 @@ describe('github issues', () => {
})
})
})
+
+
+ describe('#214', () => {
+ describe('text v-model', () => {
+ beforeEach((done) => {
+ el.innerHTML = ''
+ + ''
+ + ''
+ vm = new Vue({
+ el: el,
+ data: { msg: 'hello' }
+ })
+ vm.$nextTick(done)
+ })
+
+ it('should be validated', (done) => {
+ let field = el.getElementsByTagName('input')[0]
+
+ // default
+ assert(vm.$validator1.field1.required === false)
+ assert(vm.$validator1.field1.minlength === false)
+ assert(vm.$validator1.field1.valid === true)
+ assert(vm.$validator1.field1.touched === false)
+ assert(vm.$validator1.field1.modified === false)
+ assert(vm.$validator1.field1.dirty === false)
+ assert(field.value === vm.msg)
+
+ // modify vm property
+ vm.msg = 'helloworld!!'
+ setTimeout(() => {
+ assert(vm.$validator1.field1.required === false)
+ assert(vm.$validator1.field1.minlength === false)
+ assert(vm.$validator1.field1.valid === true)
+ assert(vm.$validator1.field1.touched === false)
+ assert(vm.$validator1.field1.modified === true)
+ assert(vm.$validator1.field1.dirty === true)
+ assert(field.value === vm.msg)
+
+ field.value = 'foo'
+ trigger(field, 'input')
+ trigger(field, 'blur')
+ vm.$nextTick(() => {
+ assert(vm.$validator1.field1.required === false)
+ assert(vm.$validator1.field1.minlength === true)
+ assert(vm.$validator1.field1.valid === false)
+ assert(vm.$validator1.field1.touched === true)
+ assert(vm.$validator1.field1.modified === true)
+ assert(vm.$validator1.field1.dirty === true)
+
+ done()
+ })
+ }, 10)
+ })
+ })
+
+ describe('checkbox v-model', () => {
+ beforeEach((done) => {
+ el.innerHTML = ''
+ + ''
+ + ''
+ vm = new Vue({
+ el: el,
+ data: { checkedNames: [] }
+ })
+ vm.$nextTick(done)
+ })
+
+ it('should be validated', (done) => {
+ let foo = el.getElementsByTagName('input')[0]
+ let bar = el.getElementsByTagName('input')[1]
+
+ // default
+ assert(vm.$validator1.field1.required === false)
+ assert(vm.$validator1.field1.minlength === false)
+ assert(vm.$validator1.field1.valid === true)
+ assert(vm.$validator1.field1.touched === false)
+ assert(vm.$validator1.field1.dirty === false)
+ assert(vm.$validator1.field1.modified === false)
+
+ // checked foo
+ foo.checked = true
+ trigger(foo, 'change')
+ trigger(foo, 'click')
+ trigger(foo, 'blur')
+ vm.$nextTick(() => {
+ assert(vm.$validator1.field1.required === false)
+ assert(vm.$validator1.field1.minlength === true)
+ assert(vm.$validator1.field1.valid === false)
+ assert(vm.$validator1.field1.touched === true)
+ assert(vm.$validator1.field1.dirty === true)
+ assert(vm.$validator1.field1.modified === true)
+ assert(vm.checkedNames.sort().toString() === ['foo'].sort().toString())
+
+ // checked bar
+ bar.checked = true
+ trigger(bar, 'change')
+ trigger(bar, 'click')
+ trigger(bar, 'blur')
+ vm.$nextTick(() => {
+ assert(vm.$validator1.field1.required === false)
+ assert(vm.$validator1.field1.minlength === false)
+ assert(vm.$validator1.field1.valid === true)
+ assert(vm.$validator1.field1.touched === true)
+ assert(vm.$validator1.field1.dirty === true)
+ assert(vm.$validator1.field1.modified === true)
+ assert(vm.checkedNames.sort().toString() === ['foo', 'bar'].sort().toString())
+
+ done()
+ })
+ })
+ })
+ })
+
+ describe('radio v-model', () => {
+ beforeEach((done) => {
+ el.innerHTML = ''
+ + ''
+ + ''
+ vm = new Vue({
+ el: el,
+ data: { picked: 'foo' }
+ })
+ vm.$nextTick(done)
+ })
+
+ it('should be validated', (done) => {
+ let foo = el.getElementsByTagName('input')[0]
+ let bar = el.getElementsByTagName('input')[1]
+
+ // default
+ assert(vm.$validator1.field1.required === false)
+ assert(vm.$validator1.field1.valid === true)
+ assert(vm.$validator1.field1.touched === false)
+ assert(vm.$validator1.field1.dirty === false)
+ assert(vm.$validator1.field1.modified === false)
+ assert(vm.$validator1.valid === true)
+ assert(vm.$validator1.touched === false)
+ assert(vm.$validator1.dirty === false)
+ assert(vm.$validator1.modified === false)
+
+ // change bar radio
+ bar.checked = true
+ trigger(bar, 'change')
+ trigger(bar, 'blur')
+ vm.$nextTick(() => {
+ assert(vm.$validator1.field1.required === false)
+ assert(vm.$validator1.field1.valid === true)
+ assert(vm.$validator1.field1.touched === true)
+ assert(vm.$validator1.field1.dirty === true)
+ assert(vm.$validator1.field1.modified === true)
+ assert(vm.$validator1.valid === true)
+ assert(vm.$validator1.touched === true)
+ assert(vm.$validator1.dirty === true)
+ assert(vm.$validator1.modified === true)
+ assert(vm.picked === 'bar')
+
+ // back to foo radio
+ foo.checked = true
+ trigger(foo, 'change')
+ trigger(foo, 'blur')
+ vm.$nextTick(() => {
+ assert(vm.$validator1.field1.required === false)
+ assert(vm.$validator1.field1.valid === true)
+ assert(vm.$validator1.field1.touched === true)
+ assert(vm.$validator1.field1.dirty === true)
+ assert(vm.$validator1.field1.modified === false)
+ assert(vm.$validator1.valid === true)
+ assert(vm.$validator1.touched === true)
+ assert(vm.$validator1.dirty === true)
+ assert(vm.$validator1.modified === false)
+ assert(vm.picked === 'foo')
+
+ done()
+ })
+ })
+ })
+ })
+
+ describe('select v-model', () => {
+ beforeEach((done) => {
+ el.innerHTML = ''
+ + ''
+ + ''
+ vm = new Vue({
+ el: el,
+ data: { lang: 'ja' }
+ })
+ vm.$nextTick(done)
+ })
+
+ it('should be validated', (done) => {
+ let select = el.getElementsByTagName('select')[0]
+ let en = el.getElementsByTagName('option')[0]
+ let zh = el.getElementsByTagName('option')[2]
+
+ // default
+ assert(vm.$validator1.lang.required === false)
+ assert(vm.$validator1.lang.valid === true)
+ assert(vm.$validator1.lang.touched === false)
+ assert(vm.$validator1.lang.dirty === false)
+ assert(vm.$validator1.lang.modified === false)
+ assert(vm.lang === 'ja')
+
+ en.selected = true
+ trigger(select, 'change')
+ vm.$nextTick(() => {
+ assert(vm.$validator1.lang.required === false)
+ assert(vm.$validator1.lang.valid === true)
+ assert(vm.$validator1.lang.touched === false)
+ assert(vm.$validator1.lang.dirty === true)
+ assert(vm.$validator1.lang.modified === true)
+ assert(vm.lang === 'en')
+
+ zh.selected = true
+ trigger(select, 'change')
+ trigger(select, 'blur')
+ vm.$nextTick(() => {
+ assert(vm.$validator1.lang.required === false)
+ assert(vm.$validator1.lang.valid === true)
+ assert(vm.$validator1.lang.touched === true)
+ assert(vm.$validator1.lang.dirty === true)
+ assert(vm.$validator1.lang.modified === true)
+ assert(vm.lang === 'zh')
+
+ done()
+ })
+ })
+ })
+ })
+ })
})