Exploring vuelidate for the first time has been an interesting journey. I found that while following some of the tutorial examples in their documentation, my code was showing errors even before I started typing. Strangely, the error messages were not accurate, with a "minlength" related error appearing before the expected "required field" message.
You can check out the vuelidate documentation here, which I was referencing. Additionally, here is the official Vue Material form example that I was looking at: link.
When I tried to mimic the official vuelidate example, the error message would display right away instead of waiting for me to input something:
https://i.sstatic.net/kasXD.png
Below is the single field form that I was attempting to implement the validation on:
<template>
<div class="action">
<div class="md-layout md-gutter md-alignment-bottom-center ">
<form novalidate class="md-layout" @submit.prevent="validateUser">
<md-card class="cardStyle" >
<md-card-header>
<div class="md-title">FORM TEST</div>
</md-card-header>
<md-card-content>
FORM TYPE
<md-card class="md-medium-size-25 md-small-size-60 md-xsmall-size-100">
<md-card-expand>
<md-card-actions md-alignment="space-between">
<div>
INFO
</div>
<md-card-expand-trigger>
<md-button class="md-icon-button">
<md-icon>keyboard_arrow_down</md-icon>
</md-button>
</md-card-expand-trigger>
</md-card-actions>
<md-card-expand-content>
<md-card-content>
<md-field>
<div>
<label for="eventType">Event name</label>
<md-input name="eventName" id="eventName" v-model="form.eventName"/>
</div>
</md-field>
<span class="md-error" v-if="!$v.form.eventName.required">REQUIRED</span>
<span class="md-error" v-else-if="!$v.form.eventName.minlength">INVALID</span>
</md-card-content>
</md-card-expand-content>
</md-card-expand>
</md-card>
</md-card-content>
</md-card>
</form>
</div>
</div>
</template>
<style scoped>
/*.cardStyle {
min-width: 50%;
margin: 4px;
display: inline-block;
vertical-align: top;
}*/
.action {
display: flex;
align-items: center;
justify-content: center;
position:sticky;
padding-top: 5%;
padding-bottom: 5%;
}
</style>
<script>
import { validationMixin } from 'vuelidate'
import {
required,
email,
minLength,
maxLength
} from 'vuelidate/lib/validators'
export default {
name: 'Budget',
mixins: [validationMixin],
data: () => ({
form: {
formType: null,
eventName: null,
BU: null,
startDate: null,
startHour: null,
endDate: null,
endHour: null,
participants: null,
coverage: null,
local: null,
},
}),
validations: {
form: {
eventName: {
required,
minLength: minLength(3)
},
lastName: {
required,
minLength: minLength(3)
},
age: {
required,
maxLength: maxLength(3)
},
gender: {
required
},
email: {
required,
email
}
}
},
}
</script>