Uncaught Error: [vee-validate] No such validator '1234567' exists

1
votes

I am using vee-validate to validate the register form and i have made the code as follows,

        <form @submit.prevent="signUp()">
          <div class="form-group" :class="{'has-error': errors.has('register.mobile_number') }" >
            <input v-model="register.mobile_number" v-validate="register.mobile_number" data-vv-rules="required" required class="form-control" type="number" placeholder="Mobile Number">
          </div>
          <div class="form-group" :class="{'has-error': errors.has('register.email') }" >
            <input v-model="register.email" v-validate="register.email" class="form-control" type="email" data-vv-rules="required|email" placeholder="Email">
          </div>
          <div class="form-group" :class="{'has-error': errors.has('register.password') }" >
            <input v-model="register.password" v-validate="register.password" name="password" data-vv-rules="required" class="form-control" type="password" placeholder="Password">
          </div>
          <div class="form-group" :class="{'has-error': errors.has('register.confirm_password') }" >
            <input v-model="register.confirm_password" v-validate="register.confirm_password" name="confirm_password" data-vv-as="password" data-vv-rules="required|confirmed:password" class="form-control" type="password" placeholder="Confirm Password">
          </div>
          <div class="modal-footer btn-center">
            <button type="submit" class="btn btn-default">Sign Up</button>
          </div>
        </form>

And the script was:

export default {
data() {
return {
register: {
        mobile_number: '',
        email: '',
        password: '',
        confirm_password: '',
      },
}
},
  methods: {
signUp() {
      this.$validator.validateAll().then((result) => {
      });
      axios.post(config.apiDomain+'/Home',this.register).then(response=>{
      });
    }
},
}

And also imported vee-validate in main.js as,

import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

But if we enter anything inside the input box, it is throwing error as 

Uncaught Error: [vee-validate] No such validator '12312321' exists.

Whatever thing i enter inside any of the input box, it is showing the same error. Kindly help me to resolve this issue.

2
validationvue.jsvuejs2vue-component

2 Answers

3
votes

The code is incorrectly specifying the validation rules. For example here:

<input v-model="register.mobile_number" v-validate="register.mobile_number" data-vv-rules="required" class="form-control" type="number" placeholder="Mobile Number">

The code is saying that the validation rule should be whatever is in register.mobile_number because of this: v-validate="register.mobile_number".

Instead, you should specify the name(s) of the validation rules to use.

<input v-model="register.mobile_number" v-validate="'required'" class="form-control" type="number" name="Mobile Number" placeholder="Mobile Number">

Note that I added name="Mobile Number" because either name or data-vv-name is required, and I removed data-vv-rules because it is deprecated.

All of this is covered directly in the basic example in the documentation.

5
votes

I had a similar error in VeeValidate 3, and the problem is that I forgot to include the rules in the import statement and then extend them like this:

import { required, email, integer, between } from 'vee-validate/dist/rules';

extend('required', required);
extend('email', email);
extend('integer', integer);
extend('between', between);

In case someone else does the same mistake.