From 7d1ecd51a48e7bba08e0e19de7747ce9a81bc0f5 Mon Sep 17 00:00:00 2001 From: kazuya kawaguchi Date: Sat, 12 Mar 2016 17:28:52 +0900 Subject: [PATCH] feat(v-validate): add 'initial' params Closes #58 --- src/directives/validate.js | 13 +++++++++-- src/validations/base.js | 7 +++++- src/validations/checkbox.js | 4 ++-- src/validations/radio.js | 4 ++-- src/validator.js | 38 +++++++++++++++---------------- test/specs/directives/validate.js | 37 ++++++++++++++++++++++++++++++ test/specs/event.js | 1 - 7 files changed, 77 insertions(+), 27 deletions(-) diff --git a/src/directives/validate.js b/src/directives/validate.js index eb10094..33e2a79 100644 --- a/src/directives/validate.js +++ b/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 } }) } diff --git a/src/validations/base.js b/src/validations/base.js index b63b466..6da1427 100644 --- a/src/validations/base.js +++ b/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) => { diff --git a/src/validations/checkbox.js b/src/validations/checkbox.js index d625b18..4cfb7dd 100644 --- a/src/validations/checkbox.js +++ b/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 () { diff --git a/src/validations/radio.js b/src/validations/radio.js index e01923b..2467dd3 100644 --- a/src/validations/radio.js +++ b/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 () { diff --git a/src/validator.js b/src/validator.js index 3a57c76..2e25b00 100644 --- a/src/validator.js +++ b/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) } } diff --git a/test/specs/directives/validate.js b/test/specs/directives/validate.js index 4ddbd4e..ce910e6 100644 --- a/test/specs/directives/validate.js +++ b/test/specs/directives/validate.js @@ -806,6 +806,43 @@ describe('validate directive', () => { describe('params', () => { + describe('initial', () => { + beforeEach((done) => { + el.innerHTML = '' + + '
' + + '' + + '
' + + '' + 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 = '' diff --git a/test/specs/event.js b/test/specs/event.js index 15dae10..b19aee4 100644 --- a/test/specs/event.js +++ b/test/specs/event.js @@ -165,7 +165,6 @@ describe('event', () => { input1.value = 'foo' input2.value = 'bar' trigger(input1, 'input') - trigger(input2, 'input') }) }) })