i have an input that its value can be username or email
consider this:
<ValidationProvider name="email" rules="username || email" v-slot="{ errors, valid }">
<v-text-field
v-model="something"
:error-messages="errors"
:success="valid"
label="E-mail or userName"
required
></v-text-field>
</ValidationProvider>
I need Or between rules. if one of them match pass the input.
rules="username or email"
how to achieve this in vee-validate3?
I found there is no or in vee validation
in case you want to or something you have to write custom validator and in the logic of the custom validation you are free to do anything.
Related
I have two text input fields in my vuetify form and I want to test validation errors for each of them separately. but I can't find a way to make sure which error element belongs to which input. I mean I can't find the proper selector.
This is a pseudo form:
<v-text-field
...
:error-messages="emailErrors"
data-cy="email"
></v-text-field>
<v-text-field
...
:error-messages="passwordErrors"
data-cy="password"
></v-text-field>
<v-btn type="submit" >Login</v-btn>
And this is the result produced when form has some validation errors for password field:
<div class="v-input v-input--has-state">
<div class="v-input__control">
<div class="v-input__slot">
<div class="v-text-field__slot">
<input data-cy="password" id="input-29" type="text" />
</div>
</div>
<div class="v-text-field__details">
<div class="...." role="alert">
<div class="...">
<div class="v-messages__message">password is required</div>
</div>
</div>
</div>
</div>
</div>
Notice how data-cy is acting as an attribute for input field only, therefor can not be used to find error element related to password, I can create cypress test to check if there are any validation errors in the form like this:
it('shows password validation error', () => {
cy.visit(loginUrl)
cy.cyElement('email').type('test#email.com')
// do not fill password
cy.get('button').submit()
cy.get('.v-messages__message').should('not.be.empty')
})
but I can't make sure that this validation element is really related to the password! it just checks if there are any validation errors in the form and asserts ok if yes.
One way to do it would be wrapping all vuetify components inside but it is not perfect at all.
Thank you so much in Advance!
It seems like a traversal task. You can use parents() to navigate to the common parent, and then find() the children with the specific class 'v-messages__message'.
cy.get("[data-cy=email]")
.parents(".v-input__control")
.find(".v-messages__message")
.should("contain.text", "email is required")
Here is a handy cheatsheet with all the commands available in traversing the dom: https://example.cypress.io/commands/traversal
While Igor's answer is technically correct, you don't need to know so much about the structure of the app.
Since contains works on the element specified and it's children, you can assert the message exists somewhere on the form.
cy.get('[data-cy="email"]')
.parents('form')
.should('contain', 'password is required')
or if you have data-cy="login-form" on the <v-form>,
cy.get('[data-cy="login-form"]')
.should('contain', 'password is required')
Its my first time using VeeValidate. How can I enable/disable a form field just when another is valid. For example, just enable password field after veevalidate checks the user field as valid.
Wrap both relevant fields in a ValidationObserver and use it's scoped prop errors to tell you when the one field is invalid. Something like this (untested):
<ValidationObserver v-slot="{ errors }">
<ValidationProvider vid="item1" rules="required">
<input v-model="item1" />
</ValidationProvider>
<ValidationProvider vid="item2" rules="required">
<input v-model="item2" :disabled="errors.item1"/>
</ValidationProvider>
</ValidationObserver>
I need to display all form validation errors in one alert at the top of a form when the user clicks submits (not inline with the input elements).
How do I suppress the inline validation error message if I am using Vuetify and Vee-Validation. (I will display errors in an alert using the $errors array). There is nothing about this in the documentation.
I tried not passing anything in error-messages, but then I lose the red outline on the invalid field.
My field is configured like this
<v-text-field
v-validate="'required|email'"
v-model="email"
:error-messages="errors.collect('email')"
label="Email Address*"
data-vv-name="email"
required
outline>
</v-text-field>
You can also do hide-details="auto", which instructs Vuetify to hide the inline error messages by default, and display them only when there are actually errors.
If you do not need to display any 'hints' with your input component, you can set hide-details to true.
I wish there was a way to hide the error message without interfering with the hints.
<v-text-field
v-validate="'required|email'"
v-model="email"
:error-messages="errors.collect('email')"
label="Email Address*"
data-vv-name="email"
hide-details=true
required
outline>
</v-text-field>
<v-text-field
v-validate="'required|email'"
v-model="email"
label="Email Address*"
data-vv-name="email"
name="email"
required
outline>
</v-text-field>
<div v-if="errors.has('email')" class="form-control-feedback form-text" v-cloak>The email is required
</div>
I'm trying to use vee-validate for form validation with bootstrap-vue, and cannot get anything to work. Basically, I want to do:
<b-form-input v-model="emailText"
placeholder="Enter email"
v-validate="'required|email'"
name="email"
type="text">
<b-row>
<span>{{ errors.first('email') }}</span>
</b-row>
</b-form-input>
But I don't see anything when I type a non-email address in the field. However, if I change:
b-form-input to input
then everything works. Is there a workaround for this behavior? Any help would be greatly appreciated.
You have put the error messages inside the <b-form-input>, which has no internal slot, so the error messages aren't rendered. If you move them to after the input, it should fix your issue:
<b-form-input v-model="emailText"
placeholder="Enter email"
v-validate="'required|email'"
name="email"
type="text">
</b-form-input>
<b-row>
<span>{{ errors.first('email') }}</span>
</b-row>
You can also use Bootstrap-Vue's state and invalid-feedback properties on the <b-form-input> and a surrounding <b-form-group> to display validation errors with a better accessibility. All of this is demonstrated in this codepen
So here is my password field in vuetify :
<v-text-field
label="Password"
v-model="password"
required
></v-text-field>
But when i enter text it's in clear and not *****
How to make a vuetify password textfield so when a user type it will show only ***** and not what the user is typing.
regards and thanks
Add the type="password" to your input component.
<v-text-field type="password"> </v-text-field>
You can check the Vuetify Documentation for password field properties.
<v-text-field type="password"></v-text-field>
I tried the accepted answer, but it did not work for me. Do not bind the type property. Use as a regular input password field.
Had the same problem as OP and got it to work by using the following (using Vuetify v2.1.0)
<v-text-field v-model="form.password" label="Password" type="password"></v-text-field>