Vuelidate: Validation message shows already on page load

[crodriguezvega]

The examples I see on https://monterail.github.io/vuelidate/ show that validation messages are added like this, for example:

<p v-if="!$v.text.required">Text is required</p>

But then on initial page load, the validation message already is shown. See this fiddle:

https://jsfiddle.net/b5v4faqf/97/

Is this the right way of displaying the validation messages, or should the message be wrapped in an extra condition so that it only is visible when the field has been touched? For example:

<div v-if="$v.text.$error">
    <p v-if="!$v.text.required">Text is required</p>
</div> 

Thanks.

[dobromir-hristov]

This is the proper way to do it yes. Wrap all your errors in a container with a check on $error