JavaScript/jQuery Validator - StringLengthRule
A validation rule that demands the target value length be within the specified value range (including the range's end points).
message
Specifies the message that is shown if the rule is broken.
An error message can be specified as follows:
Hard-code the message
jQuery
index.js$(function() { $("#textBox").dxTextBox({ ... }) .dxValidator({ type: "stringLength", message: "My custom message" }); });
Angular
app.component.htmlapp.module.ts<dx-text-box> <dx-validator> <dxi-validation-rule type="stringLength" 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> <DxStringLengthRule message="My custom message" /> </DxValidator> </DxTextBox> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxTextBox } from 'devextreme-vue/text-box'; import { DxValidator, DxStringLengthRule } from 'devextreme-vue/validator'; export default { components: { DxTextBox, DxValidator, DxStringLengthRule } } </script>
React
App.jsimport React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { TextBox } from 'devextreme-react/text-box'; import { Validator, StringLengthRule } from 'devextreme-react/validator'; class App extends React.Component { render() { return ( <TextBox> <Validator> <StringLengthRule message="My custom message" /> </Validator> </TextBox> ); } } export default App;
Hide the message
jQuery
index.js$(function() { $("#textBox").dxTextBox({ ... }) .dxValidator({ type: "stringLength", message: "" }); });
Angular
app.component.htmlapp.module.ts<dx-text-box> <dx-validator> <dxi-validation-rule type="stringLength" 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> <DxStringLengthRule message="" /> </DxValidator> </DxTextBox> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxTextBox } from 'devextreme-vue/text-box'; import { DxValidator, DxStringLengthRule } from 'devextreme-vue/validator'; export default { components: { DxTextBox, DxValidator, DxStringLengthRule } } </script>
React
App.jsimport React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { TextBox } from 'devextreme-react/text-box'; import { Validator, StringLengthRule } from 'devextreme-react/validator'; class App extends React.Component { render() { return ( <TextBox> <Validator> <StringLengthRule message="" /> </Validator> </TextBox> ); } } export default App;
Display the editor's name in the message
jQuery
index.js$(function() { $("#textBox").dxTextBox({ ... }) .dxValidator({ name: "password", // The error message will be "The length of the password is not correct" validationRules: [{ type: "stringLength" }] }); });
Angular
app.component.htmlapp.module.ts<dx-text-box> <!-- The error message will be "The length of the password is not correct" --> <dx-validator name="password"> <dxi-validation-rule type="stringLength"> </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 "The length of the password is not correct" --> <DxValidator name="password"> <DxStringLengthRule /> </DxValidator> </DxTextBox> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxTextBox } from 'devextreme-vue/text-box'; import { DxValidator, DxStringLengthRule } from 'devextreme-vue/validator'; export default { components: { DxValidator, DxStringLengthRule } } </script>
React
App.jsimport React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { TextBox } from 'devextreme-react/text-box'; import { Validator, StringLengthRule } from 'devextreme-react/validator'; class App extends React.Component { render() { return ( <TextBox> {/* The error message will be "The length of the password is not correct" */} <Validator name="password"> <StringLengthRule} /> </Validator> </TextBox> ); } } export default App;
trim
Indicates whether or not to remove the Space characters from the validated value.
To keep the Space characters within the validated value, set this field to false.
type
Specifies the rule type. Set it to "stringLength" to use the StringLengthRule.
If you have technical questions, please create a support ticket in the DevExpress Support Center.