message
Type:
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.htmlapp.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.jsimport 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.htmlapp.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.jsimport 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.htmlapp.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.jsimport 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;
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.