Field

VeeValidate maps HTML elements and Vue components that are under validation to instances of fields, while this class not exposed to be used publicly you can find Its API very useful if you are planning to do some lower-level actions.

WARNING

Any undocumented properties/methods are not intended for public use.

Getting the field instance

Getting a field instance is straightforward, you can use the Validator.fields.find method to get the field instance.

// find the field which has a matching name of 'email'
const field = this.$validator.fields.find({ name: 'email' });

// find the field which has a name of email and is in the 'newsletter' scope.
const field = this.$validator.fields.find({ name: 'email', scope: 'newsletter' });

// or use the id to find the field if it is known to you.
const field = this.$validator.fields.find({ id: 'fieldId' });

API

WARNING

Careful when using the field API, as it may disrupt the validator operations and may produce unintended results.

Constructor

Properties

Name	Type	Default	Description
id	string	null	The id of the field (automatically generated).
el	HTMLElement	null	The element that is the HTML input or the root element of the component being validated.
updated	boolean	false	Indicates if the field should be re-scanned to update its properties like validation rules.
watchers	Watcher[]	[]	Array of wrappers for the event listeners being used by the field instance.
events	string[]	[]	List of events that trigger validation.
rules	{ [string]: Object }	{}	A map of rules/params being used to validate the field.
validity	boolean	false	Whether the HTML Constrained API should be used to apply error messages.
aria	boolean	true	If aria-required and aria-invalid attributes should be set/updated after validation.
vm	Vue instance	null	The context component that is using the directive in its template.
component	Vue instance	null	The component being validated if it is one.
ctorConfig	VeeValidateConfig	null	A scoped config for the field.
flags	{ [string]: boolean }	{}	A string/boolean map of the field current flags state.
alias	string	null	A readonly prop for alternative name to be used by the field.
getter	() => any	null	A getter function that returns the current field value.
name	string	null	The field name.
scope	string	null	The field scope.
targetOf	string	null	The id of the field targeting this field for validation (confirmed/before/after).
initial	boolean	false	If this field should be validated upon creation.
classes	boolean	false	If flags based classes should be applied on the HTML input.
classNames	Object	{}	A map containing flag name / class names to be applied based on flags.
delay	number	0	The amount of delay for this field events triggers.
listen	boolean	true	If this field should have listeners.
model	{ expression: string, lazy: boolean }	null	Contains info about the model being bound to this field using v-model.
value	any	() => undefined	A readonly version of the getter prop.
isRequired	boolean	true | false	Readonly indicator if the field is required. (has required rule)
isDisabled	boolean	true | false	Readonly indicator if the field is disabled (skips validation).
validator	Validator	null	Readonly reference to the validator instance that created this field.
rejectsFalse	boolean	false	If required rule should fail when false is provided as a value.

Methods

Signature	Return Type	Description
matches(options: FieldMatchOptions)	boolean	Checks if the field matches the specified matching object criteria.
update(options: FieldOptions)	void	Updates the field properties and re-adds the listeners and syncs the classes applied.
reset()	void	Resets the field flags to their initial state.
setFlags(flags: { [string]: boolean })	void	Updates the field flags and also updates the specified field counterparts eg. valid/invalid.
unwatch(tag?: RegExp)	void	Removes the listeners that has a matching tag or removes all if none is provided.
updateClasses()	void	Syncs the classes being applied on the element with the flags if enabled.
updateAriaAttrs()	void	Syncs the aria attributes applied on the element with the flags if enabled.
updateCustomValidity()	void	Syncs the constrained API validation message with the first error message for this field.
destroy()	void	Removes all listeners and dependencies of the field.