React Common - Utils - validationEngine

An object that serves as a namespace for the methods required to perform validation.

import validationEngine from "devextreme-react/validation-engine"

getGroupConfig()

Gets the default validation group.

Return Value:

Object

The default validation group.

The object returned by the getGroupConfig(group) function has the following structure.

  • validators
    An array of Validator UI components that are included to the validated group.
  • validate()
    The method that allows you to validate the UI components included to the current group.
  • validated
    The event that occurs after the group is validated. You can attach/detach a handler using the on(eventName, eventHandler)/off(eventName) methods of the group.
jQuery
index.js
let defaultValidationGroup = DevExpress.validationEngine.getGroupConfig();
// ===== or when using modules =====
import validationEngine from 'devextreme/ui/validation_engine';

let defaultValidationGroup = validationEngine.getGroupConfig();
Angular
app.component.ts
import validationEngine from 'devextreme/ui/validation_engine';

let defaultValidationGroup = validationEngine.getGroupConfig();
Vue
App.vue
import validationEngine from 'devextreme/ui/validation_engine';

let defaultValidationGroup = validationEngine.getGroupConfig();
React
App.js
import validationEngine from 'devextreme/ui/validation_engine';

let defaultValidationGroup = validationEngine.getGroupConfig();

getGroupConfig(group)

Gets a validation group with a specific key.

Parameters:
group:

String

|

Object

The validation group's name or instance.

Return Value:

Object

The validation group.

The object returned by the getGroupConfig(group) function has the following structure.

  • group
    The string or object passed as the parameter.
  • validators
    An array of Validator UI components that are included to the validated group.
  • validate()
    The method that allows you to validate the UI components included to the current group.
  • validated
    The event that occurs after the group is validated. You can attach/detach a handler using the on(eventName, eventHandler)/off(eventName) methods of the group.
jQuery
index.js
let validationGroup = DevExpress.validationEngine.getGroupConfig('myGroup');
// ===== or when using modules =====
import validationEngine from 'devextreme/ui/validation_engine';

let validationGroup = validationEngine.getGroupConfig('myGroup');
Angular
app.component.ts
import validationEngine from 'devextreme/ui/validation_engine';

let validationGroup = validationEngine.getGroupConfig('myGroup');
Vue
App.vue
import validationEngine from 'devextreme/ui/validation_engine';

let validationGroup = validationEngine.getGroupConfig('myGroup');
React
App.js
import validationEngine from 'devextreme/ui/validation_engine';

let validationGroup = validationEngine.getGroupConfig('myGroup');

registerModelForValidation(model)

Registers all the Validator objects extending fields of the specified ViewModel.

Parameters:
model:

Object

The ViewModel object has fields extended by the dxValidator objects.

To specify validation rules for ViewModel fields, extend the latter with the dxValidator object.

JavaScript
var viewModel = {
    login: ko.observable("").extend({
        dxValidator: {
            validationRules: [{ type: 'required', message: 'We need your credentials' }]
        }
    }),
    //...
}

To register the rules that are defined within the dxValidator objects, call the DevExpress.validationEngine.registerModelForValidation(model) function passing the ViewModel object as a parameter.

JavaScript
DevExpress.validationEngine.registerModelForValidation(viewModel);

To validate the rules that are defined within the dxValidator objects, call the DevExpress.validationEngine.validateModel(model) function passing the ViewModel object as a parameter.

resetGroup()

Resets the values and validation result of the editors that belong to the default validation group.

jQuery
index.js
DevExpress.validationEngine.resetGroup();
// ===== or when using modules =====
import validationEngine from 'devextreme/ui/validation_engine';

validationEngine.resetGroup();
Angular
app.component.ts
import validationEngine from 'devextreme/ui/validation_engine';

validationEngine.resetGroup();
Vue
App.vue
import validationEngine from 'devextreme/ui/validation_engine';

validationEngine.resetGroup();
React
App.js
import validationEngine from 'devextreme/ui/validation_engine';

validationEngine.resetGroup();

resetGroup(group)

Resets the values and validation result of the editors that belong to the specified validation group.

Parameters:
group:

String

|

Object

The validation group's name or instance.

jQuery
index.js
DevExpress.validationEngine.resetGroup('myGroup');
// ===== or when using modules =====
import validationEngine from 'devextreme/ui/validation_engine';

validationEngine.resetGroup('myGroup');
Angular
app.component.ts
import validationEngine from 'devextreme/ui/validation_engine';

validationEngine.resetGroup('myGroup');
Vue
App.vue
import validationEngine from 'devextreme/ui/validation_engine';

validationEngine.resetGroup('myGroup');
React
App.js
import validationEngine from 'devextreme/ui/validation_engine';

validationEngine.resetGroup('myGroup');

unregisterModelForValidation(model)

Unregisters all the Validator objects extending fields of the specified ViewModel.

Parameters:
model:

Object

Specifies the model to unregister.

validateGroup()

Validates editors from the default validation group.

Return Value:

dxValidationGroupResult

The validation result.

jQuery
index.js
let validationResult = DevExpress.validationEngine.validateGroup();
// ===== or when using modules =====
import validationEngine from 'devextreme/ui/validation_engine';

let validationResult = validationEngine.validateGroup();
Angular
app.component.ts
import validationEngine from 'devextreme/ui/validation_engine';

let validationResult = validationEngine.validateGroup();
Vue
App.vue
import validationEngine from 'devextreme/ui/validation_engine';

let validationResult = validationEngine.validateGroup();
React
App.js
import validationEngine from 'devextreme/ui/validation_engine';

let validationResult = validationEngine.validateGroup();
See Also

validateGroup(group)

Validates editors from a specific validation group.

Parameters:
group:

String

|

Object

The validation group's name or instance.

Return Value:

dxValidationGroupResult

The validation result.

View on GitHub

See Also

validateModel(model)

Validates a view model.

Parameters:
model:

Object

The ViewModel object that has fields extended by the dxValidator objects.

Return Value:

Object

The validation result.

To specify validation rules for ViewModel fields, extend the latter with the dxValidator object.

JavaScript
var viewModel = {
    login: ko.observable("").extend({
        dxValidator: {
            validationRules: [{ type: 'required', message: 'We need your credentials' }]
        }
    }),
    //...
}

To register the rules that are defined within the dxValidator objects, call the DevExpress.validationEngine.registerModelForValidation(model) function passing the ViewModel object as a parameter.

JavaScript
DevExpress.validationEngine.registerModelForValidation(viewModel);

To validate the rules that are defined within the dxValidator objects, call the DevExpress.validationEngine.validateModel(model) function passing the ViewModel object as a parameter.

JavaScript
DevExpress.validationEngine.registerModelForValidation(viewModel);