React Validator - RangeRule

To specify the range that the validated value must match, set the rule's min and max configuration properties. Note that the specified range can be on a date-time or numeric scale. To validate a value against a string length, use the stringLength rule.

View Demo

See Also

• Data Validation

An error message can be specified as follows:

• Hard-code the message

  jQuery

  index.js

  $(function() {
      $("#textBox").dxTextBox({ ... })
          .dxValidator({
              type: "range",
              message: "My custom message"
          });
  });

  Angular

  app.component.html

  app.module.ts

  <dx-text-box> 
      <dx-validator>
          <dxi-validation-rule 
              type="range" 
              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>
              <DxRangeRule
                  message="My custom message"
              />
          </DxValidator>
      </DxTextBox>
  </template>
  
  <script>
  import 'devextreme/dist/css/dx.common.css';
  import 'devextreme/dist/css/dx.light.css';
  
  import { DxTextBox } from 'devextreme-vue/text-box';
  import {
      DxValidator,
      DxRangeRule
  } from 'devextreme-vue/validator';
  
  export default {
      components: {
          DxTextBox,
          DxValidator,
          DxRangeRule
      }
  }
  </script>

  React

  App.js

  import React from 'react';
  
  import 'devextreme/dist/css/dx.common.css';
  import 'devextreme/dist/css/dx.light.css';
  
  import { TextBox } from 'devextreme-react/text-box';
  import {
      Validator,
      RangeRule
  } from 'devextreme-react/validator';
  
  class App extends React.Component {
      render() {
          return (
              <TextBox>
                  <Validator>
                      <RangeRule
                          message="My custom message" />
                  </Validator>
              </TextBox>
          );
      }
  }
  export default App;

• Hide the message

  jQuery

  index.js

  $(function() {
      $("#textBox").dxTextBox({ ... })
          .dxValidator({
              type: "range",
              message: ""
          });
  });

  Angular

  app.component.html

  app.module.ts

  <dx-text-box>
      <dx-validator>
          <dxi-validation-rule 
              type="range" 
              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>
              <DxRangeRule
                  message=""
              />
          </DxValidator>
      </DxTextBox>
  </template>
  
  <script>
  import 'devextreme/dist/css/dx.common.css';
  import 'devextreme/dist/css/dx.light.css';
  
  import { DxTextBox } from 'devextreme-vue/text-box';
  import {
      DxValidator,
      DxRangeRule
  } from 'devextreme-vue/validator';
  
  export default {
      components: {
          DxTextBox,
          DxValidator,
          DxRangeRule
      }
  }
  </script>

  React

  App.js

  import React from 'react';
  
  import 'devextreme/dist/css/dx.common.css';
  import 'devextreme/dist/css/dx.light.css';
  
  import { TextBox } from 'devextreme-react/text-box';
  import {
      Validator,
      RangeRule
  } from 'devextreme-react/validator';
  
  class App extends React.Component {
      render() {
          return (
              <TextBox>
                  <Validator>
                      <RangeRule
                          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 is out of range"
              validationRules: [{
                  type: "range"
              }]
          });
  });

  Angular

  app.component.html

  app.module.ts

  <dx-text-box>
      <!-- The error message will be "Age is out of range" -->
      <dx-validator name="Age">
          <dxi-validation-rule 
              type="range">
          </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 is out of range" -->
          <DxValidator name="Age">
              <DxRangeRule />
          </DxValidator>
      </DxTextBox>
  </template>
  
  <script>
  import 'devextreme/dist/css/dx.common.css';
  import 'devextreme/dist/css/dx.light.css';
  
  import { DxTextBox } from 'devextreme-vue/text-box';
  import {
      DxValidator,
      DxRangeRule
  } from 'devextreme-vue/validator';
  
  export default {
      components: {
          DxValidator,
          DxRangeRule
      }
  }
  </script>

  React

  App.js

  import React from 'react';
  
  import 'devextreme/dist/css/dx.common.css';
  import 'devextreme/dist/css/dx.light.css';
  
  import { TextBox } from 'devextreme-react/text-box';
  import {
      Validator,
      RangeRule
  } from 'devextreme-react/validator';
  
  class App extends React.Component {
      render() {
          return (
              <TextBox>
                  {/* The error message will be "Age is out of range" */}
                  <Validator name="Age">
                      <RangeRule} />
                  </Validator>
              </TextBox>
          );
      }
  }
  
  export default App;