JavaScript/jQuery Validator Options

An object defining configuration properties for the Validator UI component.

View on GitHub

adapter

An object that specifies what and when to validate, and how to apply the validation result.

Type:

Object

This property should be specified when you cannot associate the Validator UI component with an editor, for instance, when you use custom editors or a validated value is a sequence of several DevExtreme editor values. Refer to the Validate a Custom Value topic for more details.

elementAttr

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

Type:

Object

Default Value: {}

jQuery

$(function(){
    $("#validatorContainer").dxValidator({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

Angular

HTML

TypeScript

<dx-validator ...
    [elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-validator>

import { DxValidatorModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxValidatorModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxValidator ...
        :element-attr="validatorAttributes">
    </DxValidator>
</template>

<script>
import DxValidator from 'devextreme-vue/validator';

export default {
    components: {
        DxValidator
    },
    data() {
        return {
            validatorAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>

React

App.js

import React from 'react';

import Validator from 'devextreme-react/validator';

class App extends React.Component {
    validatorAttributes = {
        id: 'elementId',
        class: 'class-name'
    }

    render() {
        return (
            <Validator ...
                elementAttr={this.validatorAttributes}>
            </Validator>
        );
    }
}
export default App;

height

Specifies the UI component's height.

Type:

Number

|

String

| undefined

Default Value: undefined

This property accepts a value of one of the following types:

Number
The height in pixels.
String
A CSS-accepted measurement of height. For example, "55px", "20vh", "80%", "inherit".

name

Specifies the editor name to be used in the validation default messages.

Type:

String

All predefined rules have a default message displayed when the rules are not satisfied by the validated editor values. If you specify the name property of the associated dxValidator object, the property value will be used as an object in the default message. For instance, the "Value is invalid" message will be transformed to "Login is invalid", if you set "Login" for the name property.

onDisposing

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

Type:

Function

Function parameters:

e:

DisposingEvent

Information about the event.

Object structure:

Name	Type	Description
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	Validator	The UI component's instance.

Default Value: null

onInitialized

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

Type:

Function

Function parameters:

e:

InitializedEvent

Information about the event.

Object structure:

Name	Type	Description
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	Validator	The UI component's instance.

Default Value: null

Angular

app.component.html

app.component.ts

<dx-validator ...
    (onInitialized)="saveInstance($event)">
</dx-validator>

import { Component } from "@angular/core";
import Validator from "devextreme/ui/data_grid";
// ...
export class AppComponent {
    validatorInstance: Validator;
    saveInstance (e) {
        this.validatorInstance = e.component;
    }
}

Vue

App.vue (Options API)

App.vue (Composition API)

<template>
    <div>
        <DxValidator ...
            @initialized="saveInstance">
        </DxValidator>
    </div>
</template>

<script>
import DxValidator from 'devextreme-vue/validator';

export default {
    components: {
        DxValidator
    },
    data: function() {
        return {
            validatorInstance: null
        };
    },
    methods: {
        saveInstance: function(e) {
            this.validatorInstance = e.component;
        }
    }
};
</script>

<template>
    <div>
        <DxValidator ...
            @initialized="saveInstance">
        </DxValidator>
    </div>
</template>

<script setup>
import DxValidator from 'devextreme-vue/validator';

let validatorInstance = null;

const saveInstance = (e) => {
    validatorInstance = e.component;
}
</script>

React

App.js

import Validator from 'devextreme-react/validator';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.saveInstance = this.saveInstance.bind(this);
    }

    saveInstance(e) {
        this.validatorInstance = e.component;
    }

    render() {
        return (
            <div>
                <Validator onInitialized={this.saveInstance} />
            </div>
        );
    }
}

jQuery

Get a UI component Instance in jQuery

Angular

Get a UI component Instance in Angular

Vue

Get a UI component Instance in Vue

React

Get a UI component Instance in React

onOptionChanged

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

Type:

Function

Function parameters:

e:

OptionChangedEvent

Information about the event.

Object structure:

Name	Type	Description
value	any	The modified property's new value.
previousValue	any	The UI component's previous value.
name	String	The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into.
fullName	String	The path to the modified property that includes all parent properties.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	Validator	The UI component's instance.

Default Value: null

onValidated

A function that is executed after a value is validated.

Type:

Function

Function parameters:

validatedInfo:

ValidatedEvent

Information about the event.

Object structure:

Name	Type	Description
brokenRule	ValidationRule	The object that represents the first broken rule on the list of specified validation rules.
brokenRules	Array<ValidationRule>	An array of validationRules that failed to pass the check.
isValid	Boolean	Indicates whether the value satisfies all rules.
name	String	The value of the name property.
status	ValidationStatus	Indicates the validation status.
validationRules	Array<ValidationRule>	An array of validation rules specified for the current dxValidator object.
value	Object	The validated value.

validationGroup

Specifies the validation group the editor will be related to.

Type:

String

Generally, the editors that are associated with dxValidator objects are validated on each value change. But you can combine several editors into a group so that they are validated together (e.g., on a button click).

The validationGroup property should be specified for the associated dxValidator object to indicate the validation group within which the editor will be validated. Assign the same validation group name for those editors that should be validated together.

View on GitHub

validationRules

An array of validation rules to be checked for the editor with which the dxValidator object is associated.

Type:

There are several predefined rule types. Each rule type demands a specific set of rule properties. Use the Validation Rules section to learn how to define rules of different types.

width

Specifies the UI component's width.

Type:

Number

|

String

| undefined

Default Value: undefined

This property accepts a value of one of the following types:

Number
The width in pixels.
String
A CSS-accepted measurement of width. For example, "55px", "20vw", "80%", "auto", "inherit".

JavaScript/jQuery Validator Options

See Also

jQuery

Angular

Vue

React

adapter

See Also

elementAttr

jQuery

Angular

Vue

React

height

name

onDisposing

onInitialized

Angular

Vue

React

See Also

jQuery

Angular

Vue

React

onOptionChanged

onValidated

validationGroup

See Also

validationRules

width