Need more advanced validation than just
type="email" over your input elements?
va-form has a solution to offer.
Default usage #
VaForm component in pair with
useForm composable provides a simple way to validate multiple form fields. It gives you
errorMessages computeds and
validate method to validate all form fields at once. You can also reset validation with
resetValidation method or reset whole form and it's values with
Named fields #
If you don't like when form jumps you can name each form field and access it's error messages with
useForm composable and hide errors under form fields using
hide-error-messages props, so you can display them in a custom way.
You can access
formData to get access to value of named fields. Notice, that
formData is not the same as native implementation of FormData, instead it is a reactive object which can contain
Date values of form fields.
- First name:
- Last name:
- Birth day:
Async validation #
By default if you return
Promise in validation rule it will be treated as async, set field in
loading state and show error after promise resolved. If there is error in synchronous rule it will be shown immediately and async validation will not be triggered to prevent extra backend calls. You can use
VaForm prop to hide loading state of form fields. You also can use
asyncValidate method to validate form fields asynchronously.
Form submit #
You can fire the
submit event of a
va-form component: for this you need to set
tag="form" to the
va-form and have at least one inner button with
The event is triggered when the component needs to change the model. Is also used by
Triggered on validation update. The event argument is:
Focus on first focusable form-component in the form.
Focus on first focusable invalid form-component in the form. This is useful for longer forms and allows to bring user attention to invalid field.
Reset values and validation state for all form-components
Reset validation for all validateable form-components.
Performs validation and updates error state for each form component. Works with nested forms.