ValidationObserver is a component that wraps your forms and provides aggregated validation state for all the fields nested under it using scoped slots.
For more information on how to use the
ValidationObserver, see Forms Guide.
Scoped Slot Props
These are the properties available on the slot scope accessible with
|dirty|| ||True if at least one field is dirty.|
|pristine|| ||True if all fields are pristine (not dirty).|
|valid|| ||True if all fields are valid.|
|invalid|| ||True if at least one field is invalid.|
|pending|| ||True if at least one field's validation is in progress.|
|touched|| ||True if at least one field has been touched (blurred).|
|untouched|| ||True if all fields haven't been touched (blurred).|
|passed|| ||True if all fields are valid as a result of user interaction|
|failed|| ||True if any field is invalid as a result of user interaction|
|errors|| ||An object containing reference to each field errors, each field is keyed by its |
|validate|| ||A method that triggers validation for all providers. Mutates child providers state unless |
|handleSubmit|| ||Calls validation like |
|reset|| ||A method that resets validation state for all providers.|
Like providers, observers render a
span by default. You can customize the rendered tag using the
tag prop, for example a
form tag might be more useful.
<!-- Render a form --> <ValidationObserver tag="form"> <!-- Fields --> </ValidationObserver>
Sometimes it is unsuitable for a Observer component in principle to render anything extra, because of limitations in the Vue rendering output, you cannot have multiple root nodes which limits the design choice to move away from renderless at the moment, in Vue 3.x it this may change with fragments.
slim prop can be used to force the component to be renderless, by default it is set to
false. The highlighted lines are the only rendered elements in the final output:
<!-- Only the form inside the observer will be rendered --> <ValidationObserver slim> <form> <!-- Fields --> </form> </ValidationObserver>
slim will take effect only when you have one child element in the slot as you cannot have multiple root nodes in a renderless component. Otherwise the tag will be rendered anyway.
<!-- Only form is rendered. --> <ValidationObserver slim> <form></form> <div></div> </ValidationObserver>
|tag|| || ||The default tag to render.|
|slim|| || ||If true, it will make the observer renderless, only rendering the HTML inside its slot.|
|disabled|| || ||If true, the observer will be ignored when |
|vid|| ||random string||if provided it will be used as the observer's id when being registered as a child of a parent observer.|
Those are the only methods meant for public usage, other methods that may exist on the ValidationObserver are strictly internal.
|validate|| || ||Validates all the child providers/observers and mutates their state unless |
|reset|| || ||Resets validation state for all child providers/observers.|
The validation observer does not emit any events at this time.