Form #
Need more advanced validation than just type="email" over your input elements? va-form has a solution to offer.
Examples #
Default usage #
VaForm component in pair with useForm composable provides a simple way to validate multiple form fields. It gives you isValid, errorMessages computed refs and validate method to validate all form fields at once. You can also reset validation with resetValidation method or reset whole form and its values with reset method.
Named fields #
If you don't like when form jumps you can name each form field and access its error messages with errorMessagesNamed with useForm composable and hide errors under form fields using hide-error-messages props, so you can display them in a custom way.
FormData #
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 string, number or 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 hide-loading 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 type="submit"
info
API #
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| autofocus | Focus on first form-component on render |
|
|
| hideErrorMessages | Hide error messages for all form-components. Can be used if you want to display messages separately |
|
|
| hideErrors | Do not highlight invalid form-components |
|
|
| hideLoading | Do not show loading state for all form-components |
|
|
| immediate | Validate form-components on mount. By default validation is performed on first user interaction with form-components |
|
|
| modelValue | Used to indicate if form is valid or not. Can be used to disable submit button for example |
|
|
| preset | Named preset combination of component props. |
| - |
| stateful | Makes all form-components stateful. By default form-components are stateless and you need to pass |
|
|
| tag | Replaces html tag. This is useful for semantics and also to allow for valid markup in some cases ( |
|
|
Events #
| Name | Description |
|---|---|
update:modelValue | The event is triggered when the component needs to change the model. Is also used by |
validation | Triggered on validation update. The event argument is: |
Methods #
| Name | Description |
|---|---|
focus | Focus on first focusable form-component in the form. |
focusInvalid | 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 | Reset values and validation state for all form-components |
resetValidation | Reset validation for all validateable form-components. |
validate | Performs validation and updates error state for each form component. Works with nested forms. |