Vue ValidationGroup API

The ValidationGroup is a UI component that allows you to validate several editors simultaneously.

import DxValidationGroup from "devextreme-vue/validation-group"
Selector: DxValidationGroup

Read Guides

NOTE
Nested validation groups are not supported.
See Also
jQuery
Angular
Vue
React
jQuery
Angular
Vue
React

Props

An object defining configuration properties for the ValidationGroup UI component.

Name Description
elementAttr

Specifies the global attributes to be attached to the UI component's container element.
height

Specifies the UI component's height.
onDisposing

A function that is executed before the UI component is disposed of.
onInitialized

A function used in JavaScript frameworks to save the UI component instance.
onOptionChanged

A function that is executed after a UI component property is changed.
width

Specifies the UI component's width.

See Also
jQuery
Angular
Vue
React

Methods

This section describes members used to manipulate the UI component.

Name Description
dispose()

Disposes of all the resources allocated to the ValidationGroup instance.
element()

Gets the root UI component element.
getInstance(element)

Gets the instance of a UI component found using its DOM node.
instance()

Gets the UI component's instance. Use it to access other methods of the UI component.
off(eventName)

Detaches all event handlers from a single event.
off(eventName, eventHandler)

Detaches a particular event handler from a single event.
on(eventName, eventHandler)

Subscribes to an event.
on(events)

Subscribes to events.
option()

Gets all UI component properties.
option(optionName)

Gets the value of a single property.
option(optionName, optionValue)

Updates the value of a single property.
option(options)

Updates the values of several properties.
reset()

Resets the value and validation result of the editors that are included to the current validation group.
resetOption(optionName)

Resets a property to its default value.
validate()

Validates rules of the validators that belong to the current validation group.

See Also
jQuery
Angular
Vue
React

Events

This section describes events fired by this UI component.

Name Description
disposing

Raised before the UI component is disposed of.
initialized

Raised only once, after the UI component is initialized.
optionChanged

Raised after a UI component property is changed.

See Also
jQuery
Angular
Vue
React

Types

Name Description
DisposingEvent

The type of the disposing event handler's argument.
InitializedEvent

The type of the initialized event handler's argument.
OptionChangedEvent

The type of the optionChanged event handler's argument.

Validation Result

A group validation result.

import { DxValidationGroupTypes } from "devextreme-vue/validation-group"
Type: DxValidationGroupTypes.dxValidationGroupResult