Answer a question

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.

Answers

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.