React Validator Props

See Also

• Configure a UI Component: Angular | Vue | React | jQuery | AngularJS | Knockout

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

• Data Validation

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", "80%", "inherit".

• Function
  A function returning either of the above. For example:

  JavaScript

  height: function() {
      return window.innerHeight / 1.5;
  }

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.

See Also

• Get a UI component Instance in Angular | AngularJS | Knockout | Vue | React

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

$(function() {
    $("#validatorContainer").dxValidator({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});

<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 { }  

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

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}
        />        
    ); 
} 

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). In the Knockout or AngularJS approach, editors should be added to the div element representing the ValidationGroup component. In this instance, you do not have to specify the validationGroup property for the associated dxValidator objects.

If you use the JQuery approach, 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.

See Also

• Validate Several Editor Values

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.

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", "80%", "auto", "inherit".

• Function
  A function returning either of the above. For example:

  JavaScript

  width: function() {
      return window.innerWidth / 1.5;
  }