vuelidate: required error message visible on first load

You can wrap it as follows: <div v-if="$v.email.$dirty"> <p class="error-login" v-if="!$v.email.email">Please enter a valid email address.</p> <p class="error-login" v-if="!$v.email.required">Email is required.</p> </div>

It’s because you are directly watching the validator output, instead of matching against field’s dirty state first. Try wrapping your messages inside an element and do v-if="$v.phoneNumber.$error". It will show up only after the input was touched.

If you look closely, that’s what we do in the docs too. Just toggling a class instead of an if.

Hi Guys,

I think you might want to consider documentation review because I think it’s not mentioned in there. At least not in every example.

Pozdrawiam, Robert

+1 on the above, I thought the behaviour was weird, didn’t realise you were controlling the visibility of the errors with a parent css class. Not that obvious from the basic example.

Pls reference the example below. The input field captures user email and there are two validations: required, email. Include conditional $v.your_model.$dirty && $v.your_model.your_custom_validation to each error. also note the event @input=“$v.your_model.$touch” on the input field to trigger the touch method on every key press. More about $touch method on the website : https://vuelidate.js.org/#sub-v-methods.

                    <input
                    @input="$v.email.$touch"
                    v-model="email"
                    name="email"
                    class="form-control"
                    :class="{ 'input--error': $v.email.$error }" />

                    <div class="error" v-if="!$v.email.required && $v.email.$dirty">Field is required</div>
                    <div class="error" v-else-if="!$v.email.email && $v.email.$dirty"> This is not a valid email </div>

validations: {
          email: {
            required ,
            email
          },
}

I agree that the docs need updating because this is really not clear, using the basic example: https://monterail.github.io/vuelidate/#sub-basic-form

You’ve abstracted the show/hide message behaviour into the class definition of a surrounding ‘form-group’, without pointing this out in the text. While I can see this now, I’ve been trying to understand this problem for some time and only came across this issue log when about to raise an issue of my own.

+1 on this too, I’ve been going back and forth for several hours now trying to compare my code and setup, and wondering why my errors were showing on page load, when in the Basic Example they’re not, and the above comments helped me find the CSS that uses a sibling rule to show the error message, and I thought Vuelidate in the docs was just doing something (that made sense to me) that made messages not show if $dirty was false, even if the form or certain fields were invalid.

Given that most people would not want errors to show on load, when the form hasn’t been touched, and hiding them has to do with CSS more than Vuelidate, I feel like that should be called out, or the examples reworked to not need custom CSS, something like:

<template v-if="$v.myfield.$dirty">
  <div :class="{ error: $v.myfield.$error" }>Fix this field</div>
</template>

I’m not sure what the difference is between $error and $invalid though, so don’t know which is better to put here.