Vuelidate: Show validation only after user begin input?

[hackuun]

For some reason I have the same code form your example, but warning is showing right after page load before user even type input. What can be an issue?

<input id="password" type="password" name="user_password" placeholder="Password" v-model.trim="form.password" @input="$v.form.password.$touch()" v-if="!showPassword">

<span v-if="!$v.form.password.required">Password is required. </span>

[shentao]

Hey!

I think the problem lies in the example that might not be all that clear (due to CSS). There is this rule:

.form-group--error + .form-group__message {
    display: block;
    color: #f57f6c;
}

Which means the error messages are visible only when the form-group has an error (in this case the input). This is not explained anywhere so we should probably reconsider this example cc @Frizi.

Anyway, what you need to use the flag $v.form.password.$error to show your error. $error equals true only when the field is both $invalid and $dirty.

I hope that helps!

[raintears]

I tried but it doesn't work too, can someone please fix the get started. @shentao

[SebRogala]

Same issue here: simple check for "required" doesn't work as I expected, my workaround in this case would be:

<span v-if="$v.form.password.$dirty && !$v.form.password.required">Password is required. </span>

[ScriptingBeating]

This is my take. Not very clean but does the job
<b-form-input
id="email"
type="email"
:class="{ 'is-invalid': $v.email.$error }"
v-model="$v.email.$model"
trim
></b-form-input>
<div v-if="$v.email.$error">
<div class="text-danger" v-if="!$v.email.required">
Email field is required
</div>
</div>