Validation Provider

The ValidationProvider component is a component that wraps your inputs and provides validation state using scoped slots.

Scoped Slot Props

These are the properties available on the slot scope accessible with v-slot:

Name	Type	Description
errors	string[]	The list of error messages.
failedRules	[x: string]: string	A map object of failed rules with (rule, message) as a (key, value)
aria	{ [x: string]: string }	Map object of aria attributes for accessibility.
classes	{ [x: string]: boolean }	Map object of the classes configured based on the validation state.
validate	(e: any) => Promise	A function that is used as an event handler to trigger validation. Useful for fields that do not use v-model.
reset	() => void	A function that resets the validation state on the provider.
valid	boolean|undefined	If The field is valid.
invalid	boolean|undefined	If the field is invalid.
changed	boolean	If the field value has been changed.
touched	boolean	If the field has been blurred.
untouched	boolean	If the field wasn't blurred.
pristine	boolean	If the field value was not manipulated.
dirty	boolean	If the field value has been manipulated.
pending	boolean	Indicates if the field validation is in progress.
required	boolean	If the field is required.
validated	boolean	If the field has been validated at least once.
passed	boolean	If the field has been validated and is valid.
failed	boolean	If the field has been validated and is invalid.

Since slot scopes can take advantage of ES6 destructing, you can opt-in for any of those properties and pass down to your slot template as you see fit, this is a small example that uses the errors prop:

<ValidationProvider rules="required" v-slot="{ errors }">
  <div>
    <input type="text" v-model="value">
    <span>{{ errors[0] }}</span>
  </div>
</ValidationProvider>

Rendering

By default, the ValidationProvider renders a span, Consider the following example where the highlighted represent the render output of the Provider component.

<ValidationProvider rules="required" v-slot="{ errors }">
  <input v-model="value" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

<!-- HTML Output -->
<span>
  <input type="text">
  <span>ERROR_MSG_PLACEHOLDER</span>
</span>

The default the rendered tag can be changed using the provider's tag prop.

<!-- Multiple Child nodes using templates -->
<ValidationProvider rules="required" tag="div">
  <template v-slot="{ errors }">
    <input v-model="value" type="text">
    <span>{{ errors[0] }}</span>
  </template>
</ValidationProvider>

<!-- Multiple Child nodes directly -->
<ValidationProvider rules="required" v-slot="{ errors }" tag="div">
  <input v-model="value" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

<!-- Both have the same HTML Output -->
<div>
  <input type="text">
  <span>ERROR_MSG_PLACEHOLDER</span>
</div>

Forcing Renderless

Sometimes it is unsuitable for a Provider component in principle to render anything extra, because of limitations in the Vue rendering engine, 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.

A slim prop can be used to force the component to be renderless, by default it is set to false.

<ValidationProvider rules="required" v-slot="{ errors }" slim>
  <div>
    <input v-model="value" type="text">
    <span>{{ errors[0] }}</span>
  </div>
</ValidationProvider>

<!-- HTML Output, NO OUTER SPANS -->
<div>
  <input type="text">
  <span>ERROR_MSG_PLACEHOLDER</span>
</div>

Note that only the first child will be rendered when slim is used, any other nodes will be dropped as you cannot have multiple root nodes in a renderless component. Be mindful of that when using the slim prop.

<ValidationProvider rules="required" v-slot="{ errors }" slim>
  <input v-model="value" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

<!-- Only input is rendered, the span is dropped -->
<input type="text">

Props

All the following props are optional.

Prop	Type	Default Value	Description
bails	boolean	true	If true, the validation will stop on the first failing rule.
customMessages	{ [k: string]: string }	{}	Custom error messages, keyed by rule name. These will override any default and configured messages.
debounce	number	0	Debounces the validation for the specified amount of milliseconds.
detectInput	boolean	true	If true, the provider will automatically detect an input with v-model/value to validate.
disabled	boolean	false	If true, the provider will be ignored when validate is called by a parent observer.
immediate	boolean	false	If the field should be validated immediately after render (initially).
mode	string | ModeFactory	config.mode	Specifies the interaction mode for this provider instance.
name	string	undefined	Specifies a field name to be used in error messages.
rules	string	undefined	The validation rules.
skipIfEmpty	boolean	true	If true, the validation will be skipped if the value is empty).
tag	string	span	The default tag to render.
vid	string	auto increment number	Identifier used for target/cross-field based rules. Must be unique across single ValidationObserver instance.

Methods

Those are the only methods meant for public usage, other methods that may exist on the ValidationProvider are strictly internal.

Method	Args	Return Value	Description
validate	value?: any	Promise<ValidationResult>	Runs a validation of the current value against the rules defined. If a value is provided, it is used as the current value and validates it.
validateSilent	void	Promise<ValidationResult>	Runs a validation of the current value against the rules defined. does not mutate the validation state.
applyResult	ValidationResult	void	Takes a validation result object and applies it on the current state.
reset	void	void	Resets validation state.
setFlags	Object	void	Updates the field flag states with an object, the object properties should be the flag names and the values should be boolean values.
setErrors	string[]	void	Updates the field errors and flags if errors length is > 1
syncValue	value?: any	void	Synchronizes the value for it to be used as the value during the next validation attempt.

Events

The validation provider does not emit any events at this time.