feat(classes): add custom validation classes

Author: kazupon

src/directives/validate.js

@@ -28,7 +28,7 @@ export default function (Vue) {
   Vue.directive('validate', {
     terminal: true,
     priority: vIf.priority + 16,
-    params: ['group', 'field', 'detect-blur', 'detect-change', 'initial'],
+    params: ['group', 'field', 'detect-blur', 'detect-change', 'initial', 'validate-classes'],
 
     paramWatchers: {
       detectBlur (val, old) {
@@ -132,6 +132,10 @@ export default function (Vue) {
         this.isDetectChange(params.detectChange)
       )
 
+      if (params.validateClasses && typeof params.validateClasses === 'object') {
+        this.validation.setValidationClasses(params.validateClasses)
+      }
+
       params.group
         && validator.addGroupValidation(params.group, this.field)
 

src/validations/base.js

@@ -24,6 +24,7 @@ export default class BaseValidation {
     this._validators = {}
     this._detectBlur = detectBlur
     this._detectChange = detectChange
+    this._classes = {}
   }
 
   get vm () { return this._vm }
@@ -74,6 +75,12 @@ export default class BaseValidation {
     }
   }
 
+  setValidationClasses (classes) {
+    each(classes, (value, key) => {
+      this._classes[key] = value
+    })
+  }
+
   willUpdateFlags (touched = false) {
     touched && this.willUpdateTouched(this._el, 'blur')
     this.willUpdateDirty(this._el)
@@ -285,8 +292,8 @@ export default class BaseValidation {
 
   _toggleValid (el, valid) {
     const { addClass, removeClass } = util.Vue.util
-    const validClass = 'valid'
-    const invalidClass = 'invalid'
+    const validClass = this._classes.valid || 'valid'
+    const invalidClass = this._classes.invalid || 'invalid'
 
     if (valid) {
       toggleClasses(el, validClass, addClass)
@@ -299,8 +306,8 @@ export default class BaseValidation {
 
   _toggleTouched (el, touched) {
     const { addClass, removeClass } = util.Vue.util
-    const touchedClass = 'touched'
-    const untouchedClass = 'untouched'
+    const touchedClass = this._classes.touched || 'touched'
+    const untouchedClass = this._classes.untouched || 'untouched'
 
     if (touched) {
       toggleClasses(el, touchedClass, addClass)
@@ -313,8 +320,8 @@ export default class BaseValidation {
 
   _togglePristine (el, pristine) {
     const { addClass, removeClass } = util.Vue.util
-    const pristineClass = 'pristine'
-    const dirtyClass = 'dirty'
+    const pristineClass = this._classes.pristine || 'pristine'
+    const dirtyClass = this._classes.dirty || 'dirty'
 
     if (pristine) {
       toggleClasses(el, pristineClass, addClass)
@@ -327,7 +334,7 @@ export default class BaseValidation {
 
   _toggleModfied (el, modified) {
     const { addClass, removeClass } = util.Vue.util
-    const modifiedClass = 'modified'
+    const modifiedClass = this._classes.modified || 'modified'
 
     if (modified) {
       toggleClasses(el, modifiedClass, addClass)

test/specs/classes.js

@@ -248,4 +248,50 @@ describe('validation classes', () => {
       })
     })
   })
+
+
+  describe('specify strict', () => {
+    beforeEach((done) => {
+      el.innerHTML = '<validator name="validator1">'
+        + '<form novalidate>'
+        + '<input type="text" v-validate:field1="{ required: true, minlength: 4 }"'
+        + '  :validate-classes="{'
+        + '    valid: \'valid-custom\', invalid: \'invalid-custom\','
+        + '    touched: \'touched-custom\', untouched: \'untouched-custom\', '
+        + '    pristine: \'pristine-custom\', dirty: \'dirty-custom\','
+        + '    modified: \'modified-custom\''
+        + '}">'
+        + '</form>'
+        + '</validator>'
+      vm = new Vue({ el: el })
+      vm.$nextTick(done)
+    })
+
+    it('should be added', (done) => {
+      let field1 = el.getElementsByTagName('input')[0]
+      let cls1 = classes(field1)
+      assert(!cls1.has('valid-custom'))
+      assert(cls1.has('invalid-custom'))
+      assert(!cls1.has('touched-custom'))
+      assert(cls1.has('untouched-custom'))
+      assert(cls1.has('pristine-custom'))
+      assert(!cls1.has('dirty-custom'))
+      assert(!cls1.has('modified-custom'))
+
+      field1.value = 'hello'
+      trigger(field1, 'input')
+      trigger(field1, 'blur')
+      vm.$nextTick(() => {
+        assert(cls1.has('valid-custom'))
+        assert(!cls1.has('invalid-custom'))
+        assert(cls1.has('touched-custom'))
+        assert(!cls1.has('untouched-custom'))
+        assert(!cls1.has('pristine-custom'))
+        assert(cls1.has('dirty-custom'))
+        assert(cls1.has('modified-custom'))
+
+        done()
+      })
+    })
+  })
 })