React Validator - NumericRule

A validation rule that demands that the validated field has a numeric value.

import { NumericRule } from "devextreme/common"
Type:

Object

View Demo

See Also

ignoreEmptyValue

If set to true, empty values are valid.

Type:

Boolean

Default Value: true

message

Specifies the message that is shown if the rule is broken.

Type:

String

Default Value: 'Value should be a number'

An error message can be specified as follows:

  • Hard-code the message

    jQuery
    index.js
     $(function() { $("#textBox").dxTextBox({ ... }) .dxValidator({ type: "numeric", message: "My custom message" }); });
    Angular
    app.component.html
    app.module.ts
     <dx-text-box> <dx-validator> <dxi-validation-rule type="numeric" message="My custom message"> </dxi-validation-rule> </dx-validator> </dx-text-box>
     import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxValidatorModule, DxTextBoxModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ DxTextBoxModule, BrowserModule, DxValidatorModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
    Vue
    App.vue
     <template> <DxTextBox> <DxValidator> <DxNumericRule message="My custom message" /> </DxValidator> </DxTextBox> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxTextBox } from 'devextreme-vue/text-box'; import { DxValidator, DxNumericRule } from 'devextreme-vue/validator'; export default { components: { DxTextBox, DxValidator, DxNumericRule } } </script>
    React
    App.js
     import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { TextBox } from 'devextreme-react/text-box'; import { Validator, NumericRule } from 'devextreme-react/validator'; class App extends React.Component { render() { return ( <TextBox> <Validator> <NumericRule message="My custom message" /> </Validator> </TextBox> ); } } export default App;

  • Hide the message

    jQuery
    index.js
     $(function() { $("#textBox").dxTextBox({ ... }) .dxValidator({ type: "numeric", message: "" }); });
    Angular
    app.component.html
    app.module.ts
     <dx-text-box> <dx-validator> <dxi-validation-rule type="numeric" message=""> </dxi-validation-rule> </dx-validator> </dx-text-box>
     import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxValidatorModule, DxTextBoxModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxValidatorModule, DxTextBoxModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
    Vue
    App.vue
     <template> <DxTextBox> <DxValidator> <DxNumericRule message="" /> </DxValidator> </DxTextBox> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxTextBox } from 'devextreme-vue/text-box'; import { DxValidator, DxNumericRule } from 'devextreme-vue/validator'; export default { components: { DxTextBox, DxValidator, DxNumericRule } } </script>
    React
    App.js
     import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { TextBox } from 'devextreme-react/text-box'; import { Validator, NumericRule } from 'devextreme-react/validator'; class App extends React.Component { render() { return ( <TextBox> <Validator> <NumericRule message="" /> </Validator> </TextBox> ); } } export default App;

  • Display the editor's name in the message

    jQuery
    index.js
     $(function() { $("#textBox").dxTextBox({ ... }) .dxValidator({ name: "Age", // The error message will be "Age should be a number" validationRules: [{ type: "numeric" }] }); });
    Angular
    app.component.html
    app.module.ts
     <dx-text-box> <!-- The error message will be "Age should be a number" --> <dx-validator name="Age"> <dxi-validation-rule type="numeric"> </dxi-validation-rule> </dx-validator> </dx-text-box>
     import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxValidatorModule, DxTextBoxModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxValidatorModule, DxTextBoxModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
    Vue
    App.vue
     <template> <DxTextBox> <!-- The error message will be "Age should be a number" --> <DxValidator name="Age"> <DxNumericRule /> </DxValidator> </DxTextBox> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxTextBox } from 'devextreme-vue/text-box'; import { DxValidator, DxNumericRule } from 'devextreme-vue/validator'; export default { components: { DxValidator, DxNumericRule } } </script>
    React
    App.js
     import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { TextBox } from 'devextreme-react/text-box'; import { Validator, NumericRule } from 'devextreme-react/validator'; class App extends React.Component { render() { return ( <TextBox> {/* The error message will be "Age should be a number" */} <Validator name="Age"> <NumericRule /> </Validator> </TextBox> ); } } export default App;

type

Specifies the rule type. Set it to "numeric" to use the NumericRule.

Type:

ValidationRuleType