Form

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 and vuelidate.

Usage

The internal v-form component makes it easy to add validation to form inputs. All input components have a rules prop which takes an array of functions. 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.


API

Examples

Validation with submit & clear

The v-form component has two functions that can be accessed by setting a ref on the component. validate() will validate all inputs and return if they are all valid or not. reset() will clear validation errors from all inputs.


Vuelidate


Vee-validate

Vee-validate is another validation plugin that allows you to check your forms. One caveat is that you must add the type=“checkbox” to properly validate a v-checkbox when using the value prop.