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

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.

Answer 1

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.

Answer 2

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.