vue 3.2.31
vee-validate 4.5.10
element-plus 2.1.6
On input event, it shows validation error message properly. But on blur event, it shows is required error message. Also on blur event, even if validation succeeded, it shows is required error message. But when form valid, meta.valid is true and vice versa.
On that time console like follows:
My code:
<VeeForm v-slot="{ isSubmitting, meta }" #submit="submitForm" ref="loginFormObserver" as="div">
<el-form :model="loginForm" ref="loginForm" name="loginForm" size="small" label-position="left" label-width="30%">
<VeeField :rules="'required|email'" name="Username" v-slot="{ field, errorMessage }">
<el-form-item :error="errorMessage" label="Username" required>
<el-input v-model="loginForm.username" type="email" clearable status-icon v-bind="field">
</el-input>
</el-form-item>
</VeeField>
<el-form-item class="text-center">
<el-button class="login-btn" native-type="submit" type="primary" :disabled="!meta.valid || isSubmitting">{{ trans('common.login') }} </el-button>
</el-form-item>
</el-form>
</VeeForm>
If I avoid required attribute fromel-form-item, it works properly. But it removes red asterisk (star) beside labels of required fields.
This might be element-plus validation causing the confusion. You can disable their validation with: :validate-event="false". Which should give you the asterisk and remove the validation behavior from element-plus.
<el-input v-model="loginForm.username" type="email" clearable status-icon v-bind="field" :validate-event="false"></el-input>
Related
In vuejs 2 app using vee-validate ^3.4.14 I have several inputs on modal form of fixed height.
On validation errors I got validation error messages below of inputs, as I have layout like :
<div class="form-group">
<ValidationProvider
name="password_confirmation"
rules="required"
v-slot="{ errors }"
>
<div class="input-group">
<input type="password"
v-model="password_confirmation"
id="password_confirmation"
name="password_confirmation"
class="form-control editable_field"
placeholder="Password confirmation"
autocomplete=off
ref="password"
>
</div>
<p class="error">{{ errors[0] }}</p>
</ValidationProvider>
</div>
But these messages break layout of modal form, as height of modal form is increased and elements
on bottom of the form are hidden. If there is a way to show these errors in some other way ?
Say a) select input with “error_border” class and b) show some tooltip message near with any input with error text?
Thanks in advance!
I am using ValidationObserver and ValidationProvider for validating the email field.
<ValidationProvider
name="email"
rules="required|max:50|email"
v-slot="{ errors }"
>
<md-field
class="border-round-10 border_box"
:class="{ 'md-invalid': errors.length > 0 }"
>
<label>Email </label>
<md-input
v-model="email"
#blur="greatToSeeYou()"
></md-input>
<span class="md-error">{{ errors[0] }}</span>
</md-field>
</ValidationProvider>
I want to validate the email only after the submit button. I tried so many options but didn't work.
There is 4 modes to configure ValidationProvider: aggressive, lazy, eager and passive.
From your requirement, you would like to validate the form on submission only so you can choose passive mode
<ValidationProvider
name="email"
rules="required|max:50|email"
v-slot="{ errors }"
mode="passive"
>
...
</ValidationProvider>
Here is the codesandbox example I made for your reference:
https://codesandbox.io/s/kind-breeze-rbf27?file=/src/components/HelloWorld.vue:146-293
Good day, how can i make v-select validate work on IE 11?
i added require('es6-promise').polyfill(); on my vue script but till i encounter error Failed to generate render function.
<v-select :options="books" label="title" v-model="selected">
<template #search="{attributes, events}">
<input
class="vs__search"
:required="!selected"
v-bind="attributes"
v-on="events"
/>
</template>
</v-select>
Solve by accessing the slot directly and binding the required attributes
<v-select :options="books" label="title" v-model="selected">
<template #search="{attributes, events}">
<input :required="!selected" aria-label="Search for option" role="combobox" type="search" autocomplete="off" class="vs__search">
</template>
</v-select>
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