When it comes to form validation, Vuetify has a multitude of integrations and baked in functionality. Want to use a 3rd party validation plugin? Out of the box you can use Vee-validate<\/a> and vuelidate<\/a>. <\/p>\n\n\n\n The The v-form<\/code> component makes it easy to add validation to form inputs. All input components have a rules<\/code> prop which takes an array of functions. These functions allow you to specify conditions in which the field is valid<\/em> or invalid<\/em>. Whenever the value of an input is changed, each function in the array will receive the new value. If a function returns false or a string, validation has failed. <\/p>\n\n\n\n
<template>
<v-form v-model=\"valid\">
<v-container>
<v-row>
<v-col
cols=\"12\"
md=\"4\"
>
<v-text-field
v-model=\"firstname\"
:rules=\"nameRules\"
:counter=\"10\"
label=\"First name\"
required
><\/v-text-field>
<\/v-col>
<v-col
cols=\"12\"
md=\"4\"
>
<v-text-field
v-model=\"lastname\"
:rules=\"nameRules\"
:counter=\"10\"
label=\"Last name\"
required
><\/v-text-field>
<\/v-col>
<v-col
cols=\"12\"
md=\"4\"
>
<v-text-field
v-model=\"email\"
:rules=\"emailRules\"
label=\"E-mail\"
required
><\/v-text-field>
<\/v-col>
<\/v-row>
<\/v-container>
<\/v-form>
<\/template> <\/pre>\n\n\n\nStepper:<\/strong><\/h6>\n\n\n\n
v-stepper<\/code> component displays progress through numbered steps.<\/p>\n\n\n\n<template>
<v-stepper v-model=\"e1\">
<v-stepper-header>
<v-stepper-step :complete=\"e1 > 1\" step=\"1\">Name of step 1<\/v-stepper-step>
<v-divider><\/v-divider>
<v-stepper-step :complete=\"e1 > 2\" step=\"2\">Name of step 2<\/v-stepper-step>
<v-divider><\/v-divider>
<v-stepper-step step=\"3\">Name of step 3<\/v-stepper-step>
<\/v-stepper-header>
<v-stepper-items>
<v-stepper-content step=\"1\">
<v-card
class=\"mb-12\"
color=\"grey lighten-1\"
height=\"200px\"
><\/v-card>
<v-btn
color=\"primary\"
@click=\"e1 = 2\"
>
Continue
<\/v-btn>
<v-btn text>Cancel<\/v-btn>
<\/v-stepper-content>
<v-stepper-content step=\"2\">
<v-card
class=\"mb-12\"
color=\"grey lighten-1\"
height=\"200px\"
><\/v-card>
<v-btn
color=\"primary\"
@click=\"e1 = 3\"
>
Continue
<\/v-btn>
<v-btn text>Cancel<\/v-btn>
<\/v-stepper-content>
<v-stepper-content step=\"3\">
<v-card
class=\"mb-12\"
color=\"grey lighten-1\"
height=\"200px\"
><\/v-card>
<v-btn
color=\"primary\"
@click=\"e1 = 1\"
>
Continue
<\/v-btn>
<v-btn text>Cancel<\/v-btn>
<\/v-stepper-content>
<\/v-stepper-items>
<\/v-stepper>
<\/template><\/pre>\n