vue2 plus vee-validate - how to customize error messages without ES6?

Question

I am trying (without a success) to customize error messages for vee-validate, but all the examples on the website use ES6. I can bet it's doable also without it, so any suggestions what I am doing wrong are appreciated :)

<script>
    const messages = {
      en: {
        confirmed: "Your password is not confirmed",
        email: "I really dont like your email"
      }
    };

    Vue.use(VeeValidate);
    var app = new Vue({
        el: '#app'            
    });
    app.$validator.updateDictionary(messages);
</script>

There are no errors, simply the default messages are used.

UPDATE

Below is my HTML code.

<input type="text" name="email" v-validate data-vv-rules="required|email" />
<span v-show="errors.has('email')">{{ errors.first('email') }}</span>

<input type="password" name="password" v-validate data-vv-rules="required" />
<span v-show="errors.has('password')">{{ errors.first('confirmation')}} </span>  
<input type="password" name="confirmation" v-validate data-vv-rules="confirmed:password"/>
<span v-show="errors.has('confirmation')">{{ errors.first('confirmation')}}/span>

Saurabh · Accepted Answer · 2016-12-11 09:13:55Z

9

() => is syntax to define function in ES6, so to convert syntax of vee-validate to older Javascript.

so from the documentation:

alpha: () => 'Some English Message'

will be equivalent of

alpha: function() {
  return 'Some English Message'
}

Similarly, you have to make following changes:

<script>
    const messages = {
      en: {
        confirmed: function () { 
            return "Your password is not confirmed"
        },
        email: function () { 
            return "I really dont like your email"
        }
      }
    };

    Vue.use(VeeValidate);
    var app = new Vue({
        el: '#app'            
    });
    app.$validator.updateDictionary(messages);
</script>

Updated Answer with working example

There seems to be some syntax errors in the above code, Following is the working code with latest vee-validate syntax:

<script>
const dictionary = {
  en: {
    messages: {
      confirmed: function () { 
        return "Your password is not confirmed"
      },
      email: function () { 
        return "I really dont like your email"
      }
    }
  }
};

VeeValidate.Validator.updateDictionary(dictionary);
Vue.use(VeeValidate);
Vue.config.debug = true;
var App = new Vue({
    el: '#app'
});
</script>

Working fiddle.

edited Dec 11, 2016 at 9:13

answered Dec 10, 2016 at 8:19

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lech Migdal Over a year ago

Thank you for the hint. Now what makes me wonder is that I still get the default error messages from vee-validate. I've attached the HTML code for reference, maybe there is something else I do incorrectly?

Collectives™ on Stack Overflow

vue2 plus vee-validate - how to customize error messages without ES6?

1 Answer 1

Updated Answer with working example

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Updated Answer with working example

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related