DEV Community

Discussion on: Vuetify Form Validation

Collapse
 
eclecticcoding profile image
Chuck • Edited

Thanks for reading Bryan. Remember the syntax shown here is using Vuetify styling, so the syntax for vuelidate is a little different. Vuelidate's basic form instructions do not use any computed values, but instead use v-if logic to display appropriate error messages.

For instance, from their documentation:

<label class="form__label">Name</label>
<input class="form__input" v-model.trim="$v.name.$model"/>
<div class="error" v-if="!$v.name.required">Field is required</div>
<div class="error" v-if="!$v.name.minLength">Name must have at least {{$v.name.$params.minLength.min}} letters.</div>
Enter fullscreen mode Exit fullscreen mode

You can them style accordingly.