Vue Validator Props

An object defining configuration properties for the Validator UI component.

View on GitHub

See Also
jQuery
Angular
Vue
React

adapter

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

Selector: DxAdapter
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.

See Also

elementAttr

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

Selector: DxElementAttr
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

|

Function

| undefined
Return Value:

Number

|

String

The UI component's height.

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".

  • Function (deprecated since v21.2)
    Refer to the W0017 warning description for information on how you can migrate to viewport units.

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.

Selector: @disposing
Type:

Function

Function parameters:
e:

EventInfo

Information about the event.

Object structure:
Name Type Description
component

Validator

The UI component's instance.
element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
Default Value: null

onInitialized

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

Selector: @initialized
Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

Validator

The UI component's instance.
element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
Default Value: null

See Also
jQuery
Angular
Vue
React

onOptionChanged

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

Selector: @option-changed
Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
model any

Model data. Available only if you use Knockout.
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.
name

String

The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into.
value any

The modified property's new value.
previousValue any

The UI component's previous value.
Default Value: null

The following example shows how to subscribe to component property changes:

jQuery
index.js
$(function() {
    $("#validatorContainer").dxValidator({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-validator ...
    (onOptionChanged)="handlePropertyChange($event)"> 
</dx-validator>
import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
    // ...
    handlePropertyChange(e) {
        if(e.name === "changedProperty") { 
            // handle the property change here
        }
    }
}
import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { DxValidatorModule } from 'devextreme-angular'; 

@NgModule({ 
    declarations: [ 
        AppComponent 
    ], 
    imports: [ 
        BrowserModule, 
        DxValidatorModule 
    ], 
    providers: [ ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { }
Vue
App.vue
<template> 
    <DxValidator ...
        @option-changed="handlePropertyChange"
    />            
</template> 

<script>  
import 'devextreme/dist/css/dx.light.css'; 
import DxValidator from 'devextreme-vue/validator'; 

export default { 
    components: { 
        DxValidator
    }, 
    // ...
    methods: { 
        handlePropertyChange: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    } 
} 
</script>
React
App.js
import React from 'react';  
import 'devextreme/dist/css/dx.light.css'; 

import Validator from 'devextreme-react/validator'; 

const handlePropertyChange = (e) => {
    if(e.name === "changedProperty") {
        // handle the property change here
    }
}

export default function App() { 
    return ( 
        <Validator ...
            onOptionChanged={handlePropertyChange}
        />        
    ); 
}

View on GitHub

onValidated

A function that is executed after a value is validated.

Selector: @validated
Type:

Function

Function parameters:
validatedInfo:

Object

Information about the event.

Object structure:
Name Type Description
brokenRule

RequiredRule

|

NumericRule

|

RangeRule

|

StringLengthRule

|

CustomRule

|

CompareRule

|

PatternRule

|

EmailRule

|

AsyncRule

The object that represents the first broken rule on the list of specified validation rules.
brokenRules

Array<RequiredRule | NumericRule | RangeRule | StringLengthRule | CustomRule | CompareRule | PatternRule | EmailRule | AsyncRule>

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<RequiredRule | NumericRule | RangeRule | StringLengthRule | CustomRule | CompareRule | PatternRule | EmailRule | AsyncRule>

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.

Selector: validation-group
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

See Also

validationRules

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

Selector: DxValidationRule
Type:

Array<RequiredRule | NumericRule | RangeRule | StringLengthRule | CustomRule | CompareRule | PatternRule | EmailRule | AsyncRule>

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

|

Function

| undefined
Return Value:

Number

|

String

The UI component's width.

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".

  • Function (deprecated since v21.2)
    Refer to the W0017 warning description for information on how you can migrate to viewport units.