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

You can configure an error message in the following ways:

• Specify a hard-coded message:

  jQuery

  index.js

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

  Angular

  app.component.html

  app.module.ts

  <dx-text-box>
      <dx-validator>
          <dxi-validator-validation-rule
              type="range"
              message="My custom message">
          </dxi-validator-validation-rule>
      </dx-validator>
  </dx-text-box>

  import { DxValidatorModule, DxTextBoxModule } from 'devextreme-angular';
  // ...
  
  @NgModule({
      imports: [
          DxTextBoxModule,
          DxValidatorModule,
      ],
  })

  Vue

  App.vue

  <template>
      <DxTextBox>
          <DxValidator>
              <DxRangeRule
                  message="My custom message"
              />
          </DxValidator>
      </DxTextBox>
  </template>
  
  <script setup lang="ts">
  import { DxTextBox } from 'devextreme-vue/text-box';
  import { DxValidator, DxRangeRule } from 'devextreme-vue/validator';
  
  </script>

  React

  App.tsx

  import { TextBox } from 'devextreme-react/text-box';
  import { Validator, RangeRule } from 'devextreme-react/validator';
  
  function App() {
      return (
          <TextBox>
              <Validator>
                  <RangeRule
                      message="My custom message"
                  />
              </Validator>
          </TextBox>
      );
  }

• Hide the message:

  jQuery

  index.js

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

  Angular

  app.component.html

  <dx-text-box>
      <dx-validator>
          <dxi-validator-validation-rule
              type="range"
              message="">
          </dxi-validator-validation-rule>
      </dx-validator>
  </dx-text-box>

  Vue

  App.vue

  <template>
      <DxTextBox>
          <DxValidator>
              <DxRangeRule
                  message=""
              />
          </DxValidator>
      </DxTextBox>
  </template>

  React

  App.tsx

  import { TextBox } from 'devextreme-react/text-box';
  import { Validator, RangeRule } from 'devextreme-react/validator';
  
  function App() {
      return (
          <TextBox>
              <Validator>
                  <RangeRule
                      message=""
                  />
              </Validator>
          </TextBox>
      );
  }

• Display the editor's name in the default message (for instance, "Age is out of range"):

  jQuery

  index.js

  $("#textBox").dxTextBox({
      // ...
  }).dxValidator({
      name: "Age",
      validationRules: [{
          type: "range",
      }],
  });

  Angular

  app.component.html

  <dx-text-box>
      <dx-validator name="Age">
          <dxi-validator-validation-rule
              type="range"
          ></dxi-validator-validation-rule>
      </dx-validator>
  </dx-text-box>

  Vue

  App.vue

  <template>
      <DxTextBox>
          <DxValidator name="Age">
              <DxRangeRule />
          </DxValidator>
      </DxTextBox>
  </template>

  React

  App.tsx

  import { TextBox } from 'devextreme-react/text-box';
  import { Validator, RangeRule } from 'devextreme-react/validator';
  
  function App() {
      return (
          <TextBox>
              <Validator name="Age">
                  <RangeRule />
              </Validator>
          </TextBox>
      );
  }