Questions tagged [vee-validate]

1

votes
1

answer
36

Views

how check form is valid and disable submit button in vuejs2?

I want to check if form is valid using vee-validate. I am currently doing it like this: But when the form is created and not validated yet, errors.count() return 0, meaning that the button stays enabled until the user modifies a field. Is there any way to validate it at start?
ATT
1

votes
2

answer
855

Views

Custom Error Message in Laravel 5.6.7 and Vue.js in particular Component

I am using Laravel 5.6.7 and vue.js Validation Message When the validation works in vue.js, it says 'The User Name field is required.'. Can it be 'Please enter user name'? Can I use two custom error messages for same field? Example Required: Please enter username. Alpha: Please enter alpha chars onl...
eddedeed
1

votes
1

answer
1.1k

Views

How to validate multiple file form field using vee-validate?

I have a multiple file select form field and i am using v-validate to validate it.How can i validate such kind of field? {{ errors.first('images') }} {{ errors.first('images') }} I am not using multiple. instead i am using images[] in two input type in two different row.
salin kunwar
1

votes
1

answer
47

Views

How to access the validations from a common js file to all vue files?

Below is my code. I have done the validation in addEmployee.vue file and written the validation inside the script part of the addEmploee.vue file. But I would like to put those validation in the common.js file and want to access the validation in other vue files too(throughout project) e.g:I want to...
Ashwini
1

votes
1

answer
423

Views

this.$validator.validateAll().then((result) always showing false even if all form inputs are filled out

validateForm(){ this.$validator.validateAll().then((result) => { if (result) { alert('true'); return; } else{ alert('false'); } }); }, I have used this function to validate form ,but it always shows false,I am not getting what is exact error.
Akshay Dongare
1

votes
0

answer
383

Views

Vee-Validate custom errror component with scopes

I wanted to create a custom component to use Vee-Validate scopes to display the error. Currently for the forms with the scope i am doing in a following ways. Submit Method: methods: { onSubmit(scope) { console.log(this.$validator) this.$validator.validateAll().then((result) => { if (result) { alert...
aakash
1

votes
1

answer
245

Views

VueJS validation change locale during runtime

VueJS app allows changing language during runtime via vue-i18n. This works with all other texts except with validation error messages via vee-validate. It is possible to set language for validation error messages during loading. How to allow changing vee-validate error messages during runtime? Curre...
Margus Pala
1

votes
1

answer
379

Views

Vuejs Axios, When adding error to vee validate, error not showing (I explain more)

In my Vue project I use Vee-Validate and Axios. I have an API call to register a user and when I email is already used, it throws an error. With axios I catch that error and want to display the error message. Very simple right. Just doing this: this.loading = true; this.$http.post('v1/auth/register'...
Niels Lucas
1

votes
0

answer
157

Views

Vee-validate error message doesn't go away

I am trying to build a Vue input component using vee-validate for input error messages. All the errors are working correctly, but when I try to confirm two inputs with each other, the error message pops up but never goes away. My component: div .label {{ label }} input(:type='type' :value='value' @...
lauren
1

votes
1

answer
76

Views

Vue vee-validate validate input forms with router-link button

I'm using vee-validate on a form with plenty of inputs, therefore I have 3 form pages, using buttons to navigate between each other. I would like to know if there is a way to use with vee-validate in order to validate the inputs each time I'm clicking on the to access to the next form page.
Kaiser91
1

votes
0

answer
42

Views

How can I abstract vee-validate errors properties?

I currently have a custom component with v-validate on the parent. I would like to abstract out the 'fields.email && fields.email.touched ? errors.first('email') : ''' into it's own method, preferably on a mixin. I have tried creating a method that takes in a name and returns the result of the above...
Briggs Elsperger
1

votes
0

answer
117

Views

v-validate files.every is not a function

i use bootstrap-vue and v-validate in vuejs, When I want to use validation in a input file, I get the following error: [Vue warn]: Error in event handler for 'input': 'TypeError: files.every is not a function' code:
Mohammad
1

votes
1

answer
277

Views

Vee-Validate. Using flags on the field value returns undefined? Written with TypeScript

https://baianat.github.io/vee-validate/guide/flags.html#introduction According to the documentation, I should be able to get a boolean when using a flag on the value of one of the fields. Eg. computed: { isFormDirty() { return Object.keys(this.fields).some(key => this.fields[key].dirty); } }, I am...
randomguy
1

votes
0

answer
917

Views

How To Validate Select Option With Vee-Validate

Going through vee-validates documentation I don't see anything for validating select inputs. So my question is can you validate selects? Currently what I try does not display an error message... Here is the code {{option}} {{ category }} {{ errors.first('Category Type') }}
TJ Weems
1

votes
1

answer
28

Views

Using an index in the name attribute and have a custom error message using vee validate?

I have a list of user cards on one page. I need to use an index to differentiate the field names on each of these cards. ex. userDob${i} I also have to create a custom message for these user inputs. Normally for custom messages, I can simply write custom: { userDob: { required: 'User dob is requir...
Amanda
1

votes
1

answer
44

Views

Multiple css classes in VeeValidate classNames

Is it possible to set multiple classes in VeeValidate (option classNames)? I am using VeeValidate for Vue.js for form validation. There are options: 'classes: true, classNames: valid and invalid css class.' I would like to use bootstrap 'alert alert-warning'. However, when I add class names below,...
czmafi00
1

votes
1

answer
49

Views

Vee validate across multiple fields

How can i validate a list of values across fields where at least one single value has to be set (not zero) I need to validate that at least one field is entered (eg the total is not zero) The issue I have is that the validator::total_cost does not re-evaluate all the fields under validation when an...
PingCrosby
1

votes
1

answer
53

Views

VeeValidate 'required_if:' rule

I have used syntax rule required_if from docs: vee-validate required_if rule and it doesn't work. Can someone point me to the right direction? I need this simple required_if rule to work before I go further. JSfiddle: Vue.use(VeeValidate) new Vue({ el: '#app', data() { return { first: '', last...
Adam Orlov
1

votes
1

answer
2k

Views

Submitting form in Vue.js with ajax with Vuetify and vee-validate

Does anyone know how can I submit it to JSON after the form validation? Here is my code: Contact.vue contact Drop a message and we will be in contact soon. submit clear export default { name: 'contact', data () { return { name: '', phone: '', email: '', message: '' } }, methods: { submit () { this.$...
Fabio Zanchi
1

votes
1

answer
295

Views

How to use VeeValidate or any third party package locally inside vue component

Ok here is the situation, I am working on a SPA with Vue.js. I am using VeeValidate in one of my component say in Component1.vue like this, import Vue from 'vue'; import VeeValidate from 'vee-validate'; Vue.use(VeeValidate); export default { //... } In another component say in Component2.vue I am us...
Sazzadur Rahman
1

votes
1

answer
1.6k

Views

vee validate “required” validation is working only when on change of the field

Below is my code. Three fields are there in my form. Firstname, Middlename, Lastname. All these fields are set as required one. Only difference is that 'Firstname & Lastname' contains input tag, but 'Middlename' contains b-form-input tag. Actually my problem is, When I focus out(blur) these('Firstna...
Ashwini
1

votes
1

answer
221

Views

Vue.js some errors/warnings are quite difficult to debug

While running a Vue.js app, I get a warning in the console that I cannot determine where it's coming from (in source code) or at least from which component I get it raised. Here is the console output: TypeError: Cannot read property 'length' of undefined at _c.attrs.rules (eval at ./node_modules/vue...
1

votes
1

answer
201

Views

vue-material and vee-validate work together

I tried to make vue-material and vee-validate work together but had some issue. Please see this fiddle The basic example without material is working but the material design one is not. Email {{ errors.first('email1') }} Please advice.
Tester
1

votes
1

answer
346

Views

CSS height transition on removal of style=“display:none;”

I have html this is basically like this: {{ error.first() }} The display:none is added by JavaScript at load time. It is removed if the user types an invalid value in checked_field. Since the framework controls visibility by simply removing style='display:none;', I am wondering: Is it possible to t...
Oliver Williams
1

votes
1

answer
246

Views

Is possible get which component call some action Vuex?

Is possible to get which component call some action Vuex ? I return a promise from vuex actions and take some decisions in component as set errors messages on respective fields but I would like to set on component.$validator.errors asap I receive http response (in action method) Is that possible and...
1

votes
2

answer
75

Views

Using vee-validate for validation of dropbox

Sorry for the very basic question I'm trying to validate a form using vee-validate. text/email/number fields are not a problem. But I couldn't find a good documentation on validating dropdown/checkbox/radio fields. What I want is 'you have to select some option from the dropdown'. For that i tried...
f1uk3r
1

votes
1

answer
0

Views

Validate array of inputs with Vee-Validate (Vuejs)

The following works: // ... // shows only for last active input {{ error }} If I make some input empty, it shows an error message. But if I then fill some other empty input with text, the error message disappears completely. That should not be the case, because the other input is still empty. To sum...
red1575
1

votes
1

answer
39

Views

Vee Validate field validation not updating

I have created a settings page where users can update their email addresses. Everything worked fine but suddenly the validation is not updating anymore. Only the first change of the input field triggers validateState(). Any further changes will not trigger this function so the status of that field...
nipeco
1

votes
1

answer
22

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
348

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
1.1k

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
1.2k

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
342

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

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
725

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
658

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
31

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

View additional questions