React Validator - RangeRule

A validation rule that demands the target value be within the specified value range (including the range's end points).

Type:

Object

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

ignoreEmptyValue

If set to true, empty values are valid.

Type:

Boolean

Default Value: true

max

Specifies the maximum value allowed for the validated value.

Type:

Date

|

Number

message

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

Type:

String

Default Value: 'Value is out of range'

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;

min

Specifies the minimum value allowed for the validated value.

Type:

Date

|

Number

reevaluate

Indicates whether the rule should be always checked for the target value or only when the target value changes.

Type:

Boolean

Default Value: false

type

Specifies the rule type. Set it to "range" to use the RangeRule.

Type:

String

Accepted Values: 'required' | 'numeric' | 'range' | 'stringLength' | 'custom' | 'compare' | 'pattern' | 'email' | 'async'