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>
Related
The following code is the code used in my project when editing a user:
<v-form ref="editUser"
v-model="editUserValid"
>
<v-text-field
v-model="editUserDialog.target.name"
label="Name"
:rules="[]"
/>
<v-text-field
v-model="editUserDialog.target.username"
label="Username"
:rules="[rules.username, rules.username_ldap]"
/>
<v-text-field
v-model="editUserDialog.target.email"
label="e-Mail"
:rules="[rules.email]"
/>
</v-form>
...
<v-btn
:disabled="!editUserFormValid"
#click="editUser();
>
Save
</v-btn>
The rules specified all work flawlessly, the problem is that iÍ have to change the input which is provided so the rules "check" my input.
When changing the username and the email and both are matching with the rules I specified, everything works. But when I only want to change the username I have to change the email aswell (here I can just add a character and remove it which refreshes the rules-check).
How can I check for ruling without an input?
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.
I am using Vuetify v-card-text inputs for my login page and the autocomplete displays the value on top of the label, which creates this annoying glitch. When I click on the inputs the labels clear out.
How do I get rid of label if the autocomplete is on?
<v-text-field
:rules="emailRules"
autocomplete
label="Email"
v-model="login.mail"
></v-text-field>
<v-text-field
:rules="passwordRules"
autocomplete
label="Password"
type="password"
v-model="login.password"
v-on:keypress.enter="submit()"
></v-text-field>
I don't think v-text-field has autocomplete props. Here
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 am using v-text-filed and in that, I am using textarea. I want to change the default height of textarea and make it small. Is it possible to do this?
<v-text-field
name="input-1"
label="Label Text"
textarea
></v-text-field>
add rows property
<v-text-field
name="input-1"
label="Label Text"
textarea
rows="2"
></v-text-field>
If you want to use textarea, I think use <v-textarea> tag is better. The example code is:
<v-textarea
name="content"
hint="hint text"
rows="2"
></v-textarea>
you also follow this link to get more details