Questions tagged [vee-validate]

I tried adding v-validate=''length:10'' for the number type input. It's working as expecting if I just add numbers, but I give + in it, it's accepting lots of numbers
Here is the codesandbox to try. Try adding 1121212122+1212122 .

I'm wondering if it's possible to have multiple password requirements passed to VeeValidate in order to display which requirements a user is missing.
For instance, if we require that a user's password should have at least one uppercase letter and at least one number and be at least 5 characters long...

I have a some custom JQuery code that listen to events and add some classes to form elements (focus, blur, odd/even, etc). Nothing big but I would like not to re-writte all this logic in VueJS since all the website use only JQuery and 1 page uses VueJS for a complex form.
I wrote a Directive to laun...

I have a problem with custom validation in vee-validate. I have this method, which is checking if email already exists in my database, but i'm keep getting error Error in callback for watcher 'email': 'TypeError: Cannot read property 'then' of undefined'
This is my HTML code, which has validation em...

App (parent)
Hi I have these component (Child)
TextComponent
InfoErrorForm
When I press submit from the parent component App is not validate this form. So I tried to validate with inject $validator in the child component (TextComponent), and provide but not show message error .
If you can help me to...

Say i have this button in a component and want to dynamically have the button be disabled until a user has filled out the textField with a valid email.
{{ $t('button.identity') }}
I'm setting valid email as a computed property, but it doesnt seem to work since its a promise
computed: {
validEmail ()...

I need to validate US phone number XXX-XXX-XXXX using vee-validate with this basic regex: (?:\d{3}-)\d{3}-\d{4}. The regex works fine by itself, but does not work with vee-validate, and I'm unsure why.
Markup
{{ errors.first('phone_primary') }}
Submit
Vue.use(VeeValidate);
new Vue({
el: '#app',
tem...

Using Vee-Validate, when using a custom validator along with the confirmed rule, the confirmed rule always fails validation. The custom validator is specified on the input field being confirmed like so:
Here is my Vue instance:
(function (Vue, VeeValidate) {
VeeValidate.Validator.extend('has_upper',...

I found a jsfiddle example that I forked and then edited. I don't understand what's going on or how to fix it. In my example I'm using checkboxes with values but when I click a checkbox the value is changed to true or false depending on if the checkbox is clicked.
const Checkboxes = {
template: '#...

I would like to change the error message when an input with 'cpf' rule isn't filled (in other words, when an input with 'cpf'rule didn't satisfy the 'required' rule).
I think that the 'dictionary method' with custom messages should do the work, but I couldn't make it work.
With the code below, the e...

I was wondering if there is anyway you can write a custom date validation using vee-validate plugin where the end date cannot be less than the start date? I have looked high and low, and there is nowhere I can find a definite answer to this.
If there is no way to implement this, then I can make do...

How can i Validated a form and then submit?
Button
Submit
Part of my Form
{{
errors.first('signature') }}
Part of my method
methods: {
post: function () {
this.$http.post('/api/application/', {
LastName: this.LastName,
MiddleInitial: this.MiddleInitial

js I met a problem with data-vv-as in Vee-Validator:
- I build an app with two language (khmer & english) by using Localize and i18n. when I click change language I dont wanna see first_name as required error message. so I use data-vv-as to value as First Name then I want it switch both language Khm...

I have vee-validate validating an input field. Every time an invalidation error occurs in the input field, I would like for an event to be emitted.
I thought it best, therefore, to just created a computed field that represents the $validator.errors.
The issue is that the the $emit event in watch ne...

I want to disable my submit button until my form is filled out correctly, this is what I have so far:
{{ errors.first('email') }}
Send Invite
Send Invite
The above only prints an error message and disables my submit button after I've started inputting a value. I need it to be disabled from the start...

I am trying to validate the form inside the stepper component of vuetify. I have managed somehow to do the validation. But i am confused whether this is the good way for doing the validation on vuetify stepper.
I am using the same number of method as the number of step in the wizard. I am using vee...

I have a scenario where I have sectioned out (scoped) a form so that I can validate small chunks at a time using the following function.
validateScope (scope) {
return this.$validator.validateAll(scope);
}
I want to do one final validation of the entire form before I submit it to the server; however...

I have a multiple text fields repeater with veevalidate. The problem is that, when the first field has errors, the other field will be affected. And, will inherit that error when adding new field.
-> https://prnt.sc/h75byu
here's my html
First Name
{{errors.first('fname')}}
Last Name
{{errors.firs...

I am trying to restrict the number of digits a user can input between 3-6.
For some reason, I can't find how to do that.
this is the code I have to force user to add three digits only
But what I need is between 3-6.

In my application I have a lot of forms and most inputs look exactly like this:
{{ $t('form.language')}}
{{ errors.first('language') }}
This gets duplicated over and over again. The only thing that really changes is the name of the field and the input type. Sometimes it is a select and sometimes it...

I am validating input in my AddItemComponent.vue...
It's working fine, displaying the error message when entering empty string , not showing error when user enter any value...
However after adding the item, the input field is cleared but the error message get displayed ( I am not using v-validate.i...

I try to use vee-validate on a custom component where if nothing selected on submit should show the validation error
the template looks as it follows
Send Request
and here is my vue code
Vue.component('Select2', {
props: ['options', 'value', 'id', 'placeholder', 'clear'],
template: '',
mounted: fun...

I'm currently used vee-validate to check my input, and in this case I need you to check two things, first the function that has already added, the length of the value should der example of length: 2, perfect, but Now I need to check that the value entered is not repeated.
I currently keep in my back...

I am trying to use VeeValidate and the examples show the usage of ES6 import like this:
import { Validator } from 'vee-validate';
My understanding is that this works only with npm and not with CDN. I want to just write client-side js and not use node js. Do I have to look into something like browser...

I'm trying to make a simple form validation page work with vee-validate. Something appears to be broken though, and I am unsure what exactly I am doing wrong.
The span tag appears as raw html:
Markup:
Vue.use(VeeValidate); // good to go.
new Vue({
el: '#app',
data: {
email_primary: null
}
});
{{...

I'm using VeeValidate pluggin for the validation in my project.
This is my form I'm going to validate.
If I want to validate all fields at the save button
this.$validator.validateAll().then(result => {
if (result) {
}
// alert('Correct them errors!');
}
This kind of function would help.
But what if...

I'm attempting to disable my form's submit button until valid data is entered for each of the controls.
After entering correct data for each of the fields, the submit button remains disabled.
Markup:
Last Name
{{ errors.first('lastname') }}
Desk Number
{{ errors.first('desknum') }}
Submit
Vue.use...

I have a parent component rendering a personal details component and am injecting the parent's validator scope. if I use the v-validate directive and this.$validator.validateAll() or this.$validator.validate('field_name') this works fine.
However, I need to validate some fields independently, but wh...

I am trying to use VeeValidate in a custom input component.
I tried using $emit on @input and @blur but the validation occurs on next tick and i end up failing to catch the validation on event.
onEvent (event) {
console.log('error length', this.errors.items.length)
if (this.errors.items.length) {
th...

I have the weirdest bug I have ever encountered. I am using Axios and Vee-Validate in my Vue project and from my api I get an error. So withing axios I have a catch.
example:
this.$http.post('v1/auth/register', {
first_name: this.first_name,
last_name: this.last_name,
email: this.email,
phone: this....

I'm trying to use vee validate to verify the password using this code.
{{ errors.first('password') }}
{{ errors.first('confirm_password') }}
But it always says The password confirmation does not match.
What went wrong in my code?
any help
Thanks in advance.