feat(messages): change error messages feature

BREAKING CHANGE: change `messages` to `errors`

README.md

@@ -94,12 +94,12 @@ Validation results can be accessed in this structure:
                  .dirty
                  .pristine
                  .modified
-                 .messages.field1.validator1
-                                 ...
-                                 .validatorX
-                          .field2.validator1
-                                 ...
-                                 .validatorX
+                 .errors.field1.validator1
+                               ...
+                               .validatorX
+                        .field2.validator1
+                               ...
+                               .validatorX
                  .field1.validator1
                         ...
                         .validatorX
@@ -110,9 +110,9 @@ Validation results can be accessed in this structure:
                         .dirty
                         .pristine
                         .modified
-                        .messages.validator1
-                                 ...
-                                 .validatorX
+                        .errors.validator1
+                               ...
+                               .validatorX
                  ...
                  .fieldX.validator1
                         ...
@@ -124,9 +124,9 @@ Validation results can be accessed in this structure:
                         .dirty
                         .pristine
                         .modified
-                        .messages.validator1
-                                 ...
-                                 .validatorX
+                        .errors.validator1
+                               ...
+                               .validatorX
 
 The various top-level properties are in the validation scope, and each field validation result in its own respective scopes.
 
@@ -138,7 +138,7 @@ The various top-level properties are in the validation scope, and each field val
 - `modified`: whether field value is modified; if field value was changed from **initial** value, return `true`, else return `false`.
 - `dirty`: whether field value was changed at least **once**; if so, return `true`, else return `false`.
 - `pristine`: reverse of `dirty`.
-- `messages`: if invalid field exist, return error message wrapped with object, else `undefined`.
+- `errors`: if invalid field exist, return error message wrapped with object, else `undefined`.
 
 ## Top level validation properties
 - `valid`: whether **all** fields is valid. if so, then return `true`, else return `false`.
@@ -148,7 +148,7 @@ The various top-level properties are in the validation scope, and each field val
 - `modified`: if modified field exist even **one** in validate fields, return `true`, else `false`.
 - `dirty`: if dirty field exist even **one** in validate fields, return `true`, else `false`.
 - `pristine`: whether **all** fields is pristine, if so, return `true`, else `false`.
-- `messages`: if invalid even one exist, return all field error message wrapped with object, else `undefined`.
+- `errors`: if invalid even one exist, return all field error message wrapped with object, else `undefined`.
 
 
 # Validator syntax
@@ -416,7 +416,7 @@ Checkbox validation supports lengths:
         <input id="banana" type="checkbox" value="banana" v-validate:fruits>
         <label for="banana">Banana</label>
         <ul class="errors">
-          <li v-for="msg in $validation1.fruits.messages">
+          <li v-for="msg in $validation1.fruits.errors">
             <p>{{msg}}</p>
           </li>
         </ul>
@@ -464,7 +464,7 @@ new Vue({
         <input id="banana" type="radio" name="fruit" value="banana" v-validate:fruits>
         <label for="banana">Banana</label>
         <ul class="errors">
-          <li v-for="msg in $validation1.fruits.messages">
+          <li v-for="msg in $validation1.fruits.errors">
             <p>{{msg}}</p>
           </li>
         </ul>
@@ -537,7 +537,7 @@ The vue binding syntax can group inputs together:
 ```
 
 
-# Message
+# Error Messages
 
 Error messages can be stored directly in the validation rules, rather than relying on `v-show` or `v-if`:
 
@@ -552,7 +552,7 @@ Error messages can be stored directly in the validation rules, rather than relyi
   }"/><br />
   <div class="errors">
     <ul>
-      <li v-for="obj in $validation1.messages">
+      <li v-for="obj in $validation1.errors">
         <div class="{{$key}}" v-for="msg in obj">
           <p>{{$key}}: {{msg}}</p>
         </div>
@@ -901,10 +901,10 @@ new Vue({
     age: <input type="text" v-validate:age="['numeric']"><br />
     site: <input type="text" v-validate:site="['url']"><br />
     <div>
-      <p v-if="$validation1.username.required">{{ $validation1.username.messages.required }}</p>
-      <p v-if="$validation1.address.email">{{ $validation1.address.messages.email }}</p>
-      <p v-if="$validation1.age.numeric">{{ $validation1.age.messages.numeric }}</p>
-      <p v-if="$validation1.site.url">{{ $validation1.site.messages.url }}</p>
+      <p v-if="$validation1.username.required">{{ $validation1.username.errors.required }}</p>
+      <p v-if="$validation1.address.email">{{ $validation1.address.errors.email }}</p>
+      <p v-if="$validation1.age.numeric">{{ $validation1.age.errors.numeric }}</p>
+      <p v-if="$validation1.site.url">{{ $validation1.site.errors.url }}</p>
     </div>
   <validator>
 </div>

example/checkbox/index.html

@@ -29,7 +29,7 @@ <h1>Survey</h1>
             <input id="banana" type="checkbox" value="banana" v-validate:fruits>
             <label for="banana">Banana</label>
             <ul class="errors">
-              <li v-for="msg in $validation1.fruits.messages">
+              <li v-for="msg in $validation1.fruits.errors">
                 <p>{{msg}}</p>
               </li>
             </ul>

example/custom/message/index.html

@@ -14,10 +14,10 @@
         age: <input type="text" v-validate:age=['numeric']><br />
         site: <input type="text" v-validate:site=['url']><br />
         <div>
-          <p v-if="$validation1.username.required">{{ $validation1.username.messages.required }}</p>
-          <p v-if="$validation1.address.email">{{ $validation1.address.messages.email }}</p>
-          <p v-if="$validation1.age.numeric">{{ $validation1.age.messages.numeric }}</p>
-          <p v-if="$validation1.site.url">{{ $validation1.site.messages.url }}</p>
+          <p v-if="$validation1.username.required">{{ $validation1.username.errors.required }}</p>
+          <p v-if="$validation1.address.email">{{ $validation1.address.errors.email }}</p>
+          <p v-if="$validation1.age.numeric">{{ $validation1.age.errors.numeric }}</p>
+          <p v-if="$validation1.site.url">{{ $validation1.site.errors.url }}</p>
         </div>
       <validator>
     </div>

example/message/index.html

@@ -18,7 +18,7 @@
         }"/><br />
         <div class="errors">
           <ul>
-            <li v-for="obj in $validation1.messages">
+            <li v-for="obj in $validation1.errors">
               <div class="{{$key}}" v-for="msg in obj">
                 <p>{{$key}}: {{msg}}</p>
               </div>

example/model/checkbox/index.html

@@ -29,7 +29,7 @@ <h1>Survey</h1>
             <input id="banana" type="checkbox" value="banana" v-model="selected" v-validate:fruits>
             <label for="banana">Banana</label>
             <ul class="errors">
-              <li v-for="msg in $validation1.fruits.messages">
+              <li v-for="msg in $validation1.fruits.errors">
                 <p>{{msg}}</p>
               </li>
             </ul>

example/model/radio/index.html

@@ -25,7 +25,7 @@ <h1>Survey</h1>
             <input id="banana" type="radio" name="fruit" value="banana" v-model="selected" v-validate:fruits>
             <label for="banana">Banana</label>
             <ul class="errors">
-              <li v-for="msg in $validation1.fruits.messages">
+              <li v-for="msg in $validation1.fruits.errors">
                 <p>{{msg}}</p>
               </li>
             </ul>

example/radio/index.html

@@ -25,7 +25,7 @@ <h1>Survey</h1>
             <input id="banana" type="radio" name="fruit" value="banana" v-validate:fruits>
             <label for="banana">Banana</label>
             <ul class="errors">
-              <li v-for="msg in $validation1.fruits.messages">
+              <li v-for="msg in $validation1.fruits.errors">
                 <p>{{msg}}</p>
               </li>
             </ul>

src/validations/base.js

@@ -103,7 +103,7 @@ export default class BaseValidation {
     const _ = util.Vue.util
 
     let results = {}
-    let messages = {}
+    let errors = {}
     let valid = true
 
     each(this._validators, (descriptor, name) => {
@@ -131,7 +131,7 @@ export default class BaseValidation {
         if (!ret) {
           valid = false
           if (msg) {
-            messages[name] = typeof msg === 'function' 
+            errors[name] = typeof msg === 'function' 
               ? msg.call(this._vm, this.field, descriptor.arg) 
               : msg
           }
@@ -151,8 +151,8 @@ export default class BaseValidation {
       pristine: !this.dirty,
       modified: this.modified
     }
-    if (!empty(messages)) {
-      props.messages = messages
+    if (!empty(errors)) {
+      props.errors = errors
     }
     _.extend(results, props)
 

src/validator.js

@@ -346,7 +346,7 @@ export default class Validator {
       modified: { fn: this._defineModified, arg: validationsGetter },
       dirty: { fn: this._defineDirty, arg: validationsGetter },
       pristine: { fn: this._definePristine, arg: targetGetter },
-      messages: { fn: this._defineMessages, arg: validationsGetter }
+      errors: { fn: this._defineErrors, arg: validationsGetter }
     }, (descriptor, name) => {
       Object.defineProperty(targetGetter(), name, {
         enumerable: true,
@@ -403,16 +403,16 @@ export default class Validator {
     return !scopeGetter().dirty
   }
 
-  _defineMessages (validationsGetter) {
+  _defineErrors (validationsGetter) {
     const extend = util.Vue.util.extend
     const hasOwn = util.Vue.util.hasOwn
     let ret = {}
 
     each(validationsGetter(), (validation, key) => {
       if (hasOwn(this._scope, validation.field)) {
         let target = this._scope[validation.field]
-        if (target && !empty(target['messages'])) {
-          ret[validation.field] = extend({}, target['messages'])
+        if (target && !empty(target['errors'])) {
+          ret[validation.field] = extend({}, target['errors'])
         }
       }
     }, this)

test/specs/custom.js

@@ -69,14 +69,14 @@ describe('custom', () => {
 
       it('should be validated', (done) => {
         assert(vm.$validator1.field1.numeric === true)
-        assert(vm.$validator1.field1.messages.numeric === 'invalid numeric value')
+        assert(vm.$validator1.field1.errors.numeric === 'invalid numeric value')
 
         let input = el.getElementsByTagName('input')[0]
         input.value = '10'
         trigger(input, 'input')
         vm.$nextTick(() => {
           assert(vm.$validator1.field1.numeric === false)
-          assert(vm.$validator1.field1.messages === undefined)
+          assert(vm.$validator1.field1.errors === undefined)
           done()
         })
       })
@@ -110,14 +110,14 @@ describe('custom', () => {
 
       it('should be validated', (done) => {
         assert(vm.$validator1.field1.numeric === true)
-        assert(vm.$validator1.field1.messages.numeric === (vm.format + 'field1'))
+        assert(vm.$validator1.field1.errors.numeric === (vm.format + 'field1'))
 
         let input = el.getElementsByTagName('input')[0]
         input.value = '10'
         trigger(input, 'input')
         vm.$nextTick(() => {
           assert(vm.$validator1.field1.numeric === false)
-          assert(vm.$validator1.field1.messages === undefined)
+          assert(vm.$validator1.field1.errors === undefined)
           done()
         })
       })
@@ -153,14 +153,14 @@ describe('custom', () => {
 
       it('should be validated', (done) => {
         assert(vm.$validator1.field1.required === true)
-        assert(vm.$validator1.field1.messages.required === 'required field1')
+        assert(vm.$validator1.field1.errors.required === 'required field1')
 
         let input = el.getElementsByTagName('input')[0]
         input.value = '10'
         trigger(input, 'input')
         vm.$nextTick(() => {
           assert(vm.$validator1.field1.required === false)
-          assert(vm.$validator1.field1.messages === undefined)
+          assert(vm.$validator1.field1.errors === undefined)
           done()
         })
       })

test/specs/messages.js

@@ -16,7 +16,7 @@ describe('messages', () => {
       '<input type="text" group="group2" v-validate:field4="field4">' +
       '<input type="text" group="group1" value="0" v-validate:field5="{ min: { rule :1, message: message1 } }">' +
       '<input type="text" group="group2" value="foo" v-validate:field6="{ minlength: { rule: 4, message: onMessage2 } }">' +
-      '<ul><li v-for="msg in $validation.messages">' +
+      '<ul><li v-for="msg in $validation.errors">' +
       '<div v-for="val in msg"><p>{{$key}}:{{val}}</p></div>' +
       '</li></ul>' +
       '</validator>'
@@ -59,34 +59,34 @@ describe('messages', () => {
 
     describe('fields', () => {
       it('should be kept messages', () => {
-        assert(vm.$validation.field1.messages.pattern === vm.field1.pattern.message)
-        assert(vm.$validation.field2.messages.required === vm.field2.required.message)
-        assert(vm.$validation.field3.messages.max === vm.field3.max.message)
-        assert(vm.$validation.field4.messages.maxlength === vm.field4.maxlength.message)
-        assert(vm.$validation.field5.messages.min === vm.message1)
-        assert(vm.$validation.field6.messages.minlength === vm.onMessage2('field6'))
+        assert(vm.$validation.field1.errors.pattern === vm.field1.pattern.message)
+        assert(vm.$validation.field2.errors.required === vm.field2.required.message)
+        assert(vm.$validation.field3.errors.max === vm.field3.max.message)
+        assert(vm.$validation.field4.errors.maxlength === vm.field4.maxlength.message)
+        assert(vm.$validation.field5.errors.min === vm.message1)
+        assert(vm.$validation.field6.errors.minlength === vm.onMessage2('field6'))
       })
     })
 
     describe('top', () => {
       it('should be kept messages', () => {
-        assert(vm.$validation.messages.field1.pattern === vm.field1.pattern.message)
-        assert(vm.$validation.messages.field2.required === vm.field2.required.message)
-        assert(vm.$validation.messages.field3.max === vm.field3.max.message)
-        assert(vm.$validation.messages.field4.maxlength === vm.field4.maxlength.message)
-        assert(vm.$validation.messages.field5.min === vm.message1)
-        assert(vm.$validation.messages.field6.minlength === vm.onMessage2('field6'))
+        assert(vm.$validation.errors.field1.pattern === vm.field1.pattern.message)
+        assert(vm.$validation.errors.field2.required === vm.field2.required.message)
+        assert(vm.$validation.errors.field3.max === vm.field3.max.message)
+        assert(vm.$validation.errors.field4.maxlength === vm.field4.maxlength.message)
+        assert(vm.$validation.errors.field5.min === vm.message1)
+        assert(vm.$validation.errors.field6.minlength === vm.onMessage2('field6'))
       })
     })
 
     describe('group', () => {
       it('should be kept messages', () => {
-        assert(vm.$validation.group1.messages.field1.pattern === vm.field1.pattern.message)
-        assert(vm.$validation.group1.messages.field2.required === vm.field2.required.message)
-        assert(vm.$validation.group1.messages.field5.min === vm.message1)
-        assert(vm.$validation.group2.messages.field3.max === vm.field3.max.message)
-        assert(vm.$validation.group2.messages.field4.maxlength === vm.field4.maxlength.message)
-        assert(vm.$validation.group2.messages.field6.minlength === vm.onMessage2('field6'))
+        assert(vm.$validation.group1.errors.field1.pattern === vm.field1.pattern.message)
+        assert(vm.$validation.group1.errors.field2.required === vm.field2.required.message)
+        assert(vm.$validation.group1.errors.field5.min === vm.message1)
+        assert(vm.$validation.group2.errors.field3.max === vm.field3.max.message)
+        assert(vm.$validation.group2.errors.field4.maxlength === vm.field4.maxlength.message)
+        assert(vm.$validation.group2.errors.field6.minlength === vm.onMessage2('field6'))
       })
     })
   })
@@ -133,25 +133,25 @@ describe('messages', () => {
 
     describe('fields', () => {
       it('should not be kept', () => {
-        assert(empty(vm.$validation.field1.messages))
-        assert(empty(vm.$validation.field2.messages))
-        assert(empty(vm.$validation.field3.messages))
-        assert(empty(vm.$validation.field4.messages))
-        assert(empty(vm.$validation.field5.messages))
-        assert(empty(vm.$validation.field6.messages))
+        assert(empty(vm.$validation.field1.errors))
+        assert(empty(vm.$validation.field2.errors))
+        assert(empty(vm.$validation.field3.errors))
+        assert(empty(vm.$validation.field4.errors))
+        assert(empty(vm.$validation.field5.errors))
+        assert(empty(vm.$validation.field6.errors))
       })
     })
 
     describe('top', () => {
       it('should not be kept', () => {
-        assert(empty(vm.$validation.messages))
+        assert(empty(vm.$validation.errors))
       })
     })
 
     describe('group', () => {
       it('should not be kept', () => {
-        assert(empty(vm.$validation.group1.messages))
-        assert(empty(vm.$validation.group2.messages))
+        assert(empty(vm.$validation.group1.errors))
+        assert(empty(vm.$validation.group2.errors))
       })
     })
   })