Questions tagged [vee-validate]

1

votes
0

answer
7

Views

VeeValidate - length for number input not not working if I add + in it

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 .
Lucifer
0

votes
0

answer
2

Views

VeeValidate multiple password constraints

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...
user2909019
1

votes
1

answer
334

Views

VueJS and JQuery changing classes

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...
Mushr00m
1

votes
2

answer
954

Views

Custom vee-validation throws error in console log

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...
Valor_
1

votes
2

answer
705

Views

Validate Child component Vue vee-validate

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...
HalleyRios
1

votes
1

answer
332

Views

How to disable a form using validateAll from veeValidate as a computed property?

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 ()...
yxu296
1

votes
1

answer
1.2k

Views

vee-validate regex not working

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...
a coder
1

votes
1

answer
701

Views

VeeValidate Confirmed Rule Fails With Custom Validator

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',...
Mike Lunn
1

votes
1

answer
580

Views

I'm trying to implement VeeValidate to check if at least one checkbox is checked

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: '#...
KahunaCoder
1

votes
2

answer
24

Views

Regex in Vue attribute v-validate

I would like to allow dash/hyphen in the name field How can I accomplish it? I tried to add a regex like e.g. '^[a-z]+(-[a-z]+)*$' in v-validate but nothing happens
moody
0

votes
2

answer
15

Views

How to customize “required” error messages using a dictionary on VeeValidate (Vue.Js)

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...
Thiago Benine
1

votes
1

answer
3.2k

Views

Vee-Validate custom date validation

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...
bpp
0

votes
0

answer
5

Views

Validate Fields before submit

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
user3376642
0

votes
0

answer
4

Views

data-vv-as update late one step after change value?

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...
Sen Soeurn
3

votes
1

answer
309

Views

How to watch computed vee-validate errors?

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...
Modermo
4

votes
3

answer
5.3k

Views

Using Vee-validate to disable button until form is filled out correctly

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...
Green_qaue
4

votes
1

answer
1.2k

Views

How to validate forms inside vuetify stepper using vee-validate

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...
aakash
3

votes
1

answer
693

Views

Why my vue Leave transition not working?

I am using vee validate for form validation. i am using vue transition on displaying validations errors like this: {{ errors.first('name') }} Css: .slide-fade-enter-active { transition: all .3s ease; } .slide-fade-leave-active { transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); } .slide-fade-en...
Rakesh Kohali
3

votes
1

answer
2.6k

Views

Vee-Validate validateAll() with scope

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...
Neve12ende12
3

votes
1

answer
2k

Views

How can vee-validate validates email and phone at the same time

I have write a custom validator for phone and use it like this html import { MobileValidate } from '@/validates/MobileValidates' Validator.extend('phone', MobileValidate); phone validate const MOBILEREG = /^((1[3578][0-9])+\d{8})$/; export const MobileValidate = { getMessage(field, args) { return 'p...
ChenLee
1

votes
2

answer
2k

Views

Testing Vee-Validate confirmed rule

I am having some difficulty in testing a Vee-Validate confirmed function on a Vue form built with Vuetify. The component that I am trying to test looks like this: export default { name: 'email-password-form', data () { return { submissionDetails: { email: '', password: '' }, confirmPassword: '', pa...
JavaTheNutt
1

votes
1

answer
846

Views

Multiple Text Field Repeater with VueJS Vee Validate

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...
JSmith
2

votes
1

answer
2.3k

Views

vee-validate how to set digit limit between two number?

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.
hidar
8

votes
2

answer
516

Views

Adding vee-validate / HTML attributes to input element in slot

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...
Marvin Rabe
2

votes
1

answer
724

Views

Vue.js vee-validate how to avoid error after submitting available input

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...
erwin
2

votes
1

answer
583

Views

vee validate on custom select2 component not works

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...
fefe
0

votes
1

answer
15

Views

more than one validation, confusing

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...
Gabriela
2

votes
2

answer
1.1k

Views

How to use ES6 import (client-side JS)

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...
Vulpes
4

votes
1

answer
563

Views

Basic example with vee-validate not working

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 } }); {{...
a coder
2

votes
1

answer
1.2k

Views

Vue.js Vee Validate how to do a validation with in a scope of elements

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...
2

votes
1

answer
479

Views

Disabled submit button, but valid form data will not enable it (vee-validate)

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...
a coder
2

votes
1

answer
180

Views

Assign v-validate multiple validation rules (predefined and custom)

I can't figure out how to assign multiple rules to vee-validate. Usualy you pipe | the rules inside v-validate attribute, but the problem is that I also try to include one custom method.
Valor_
2

votes
2

answer
112

Views

VeeValidate attach method: A field is missing a “name” or “data-vv-name” attribute when fields do have name

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...
Matthew Moss
1

votes
1

answer
2.1k

Views

VeeValidate(vue.js) image file size and dimensions validation

How to set validation in form like this using vee validate in vue.js Image dimension less then 500*500 pixel Image size less then 100kb
Hasan Hafiz Pasha
2

votes
1

answer
517

Views

How can i access the errors computed property on custom input component validated using vee-validate?

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...
Vlad
2

votes
2

answer
127

Views

(Vue) Axios set data not working with 2 properties. I can't explain why

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....
Niels Lucas
2

votes
0

answer
153

Views

How to use Vuex state when creating custom validation with Vee Validate

I am trying to do the following: I would like to pass a token from the Vuex store like this: ... E-mail address {{ errors.first('email') }} ... ... const isUnique = (value) => { debugger; return axios.post('/api/v1/users/email_validations', { email: value, token: this.$store.state.auth.JWT }).then((...
Kelvin Matheus
2

votes
1

answer
2.5k

Views

Vue js vee validate password confirmation always false

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.
5

votes
1

answer
108

Views

Vue.js unit:test : Is there any way to mock a Vee-Validate validator plugin?

I am testing a form component, all fields are validated with vee-validate Currently I a injecting in my wrapper mount a validator ... import VeeValidate from 'vee-validate'; ... Vue.use(VeeValidate, { errorBagName: 'errors' }); ... describe('ContactForm.vue', () => { ... const v = new VeeValidate.Va...
erwin