Forms
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 v-form component makes it easy to add validation to form inputs. All input components have a rules prop that can be used to specify conditions in which the input is either valid or invalid.
Whenever the value of an input is changed, each rule will receive the new value and be re-evaluated. If a rule returns false or a string, validation has failed and the string value will be presented as an error message.
API
| Component | Description |
|---|---|
| v-form | Primary Component |
Rules
Rules allow you to apply custom validation on all form components. These are validated sequentially, and components will display a maximum of 1 error at a time, so make sure you order your rules accordingly.
The most basic of rules is a simple function that checks if an input has a value or not, i.e. it makes it a required input.
However rules a can be as complicated as you need them to be, including the ability to validate inputs asynchronously. In the below example we are checking the input against a fake API service that takes some time to respond. The submit event is a Promise that you can wait for.
This also demonstrates the validate-on prop, which tells the v-form component when validation should happen. Here we set it to 'submit' so that we only call the API service when the button is clicked.
Examples
Props
Disabled
You can easily disable all input components in a v-form by setting the disabled prop.
Fast fail
When the fast-fail prop is set, validation will short-circuit after the first invalid input is found. This can be useful if some of your rules are computationally heavy and can take a long time. In this example, notice how when the submit button is clicked, the second input does not show validation errors even though it does not satisfy the rules.
Misc
Exposed properties
The v-form component has a number of exposed properties that can be accessed by setting a ref on the component. A ref allows us to access internal methods on a component. You can find all of them on the API page, but some of the more commonly used ones are validate(), reset(), and resetValidation().
The difference between reset() and resetValidation() is that the former resets both input values and validation state, while the latter only resets validation state.
Vee-validate
vee-validate documentation can be found here.
Vuelidate
vuelidate documentation can be found here.