One of the challenges I'm facing in my project is implementing a validation function for the customer form. While using the vuetify validate method would be the easy way to go, I need to display the validation messages both as snackbar and next to each text-field.
I am currently stuck on how to display validation error messages in the snackbar. I have attempted to create a test code snippet below. Can anyone provide some guidance?
<template>
<v-form
ref="form"
lazy-validation
>
<v-text-field
v-model="name"
:counter="10"
:rules="nameRules"
label="Name"
required
></v-text-field>
<v-text-field
v-model="email"
:rules="emailRules"
label="E-mail"
required
></v-text-field>
<v-btn
color="success"
class="mr-4"
@click="validate()"
>
Validate
</v-btn>
<v-snackbar v-model="snackbar" :top="true">
<v-btn @click="dialog=false">close</v-btn>
</v-snackbar>
</v-form>
</template>
<script lang="ts">
import {Vue} from 'nuxt-property-decorator'
export default class extends Vue{
dialog:boolean=false
snackbar:boolean=false
name:string=""
nameRules= [
(v:string) => !!v || 'Name is required',
(v:string) => (v && v.length <= 10) || 'Name must be less than 10 characters',
]
email:string=""
emailRules= [
(v:string) => !!v || 'E-mail is required',
(v:string) => /.+@.+\..+/.test(v) || 'E-mail must be valid',
]
validate(){
const validationResult=(<any>this.$refs.form).validate()
if(!validationResult){
return (this.snackbar = true)
}
}
}
</script>