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.
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.
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.
You can easily disable all input components in a
v-form by setting the disabled prop.
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.
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
The difference between
resetValidation() is that the former resets both input values and validation state, while the latter only resets validation state.
vee-validate documentation can be found here.
vuelidate documentation can be found here.