All docs
V20.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

RequiredRule

A validation rule that demands that a validated field has a value.

Type:

Object

Use this rule type to ensure the target editor value is specified. The rule will be broken in the following cases.

  • If the validated value is null, false, or undefined.
  • If the specified value has a type that is not expected for the target field (e.g., a string for the DateBox UI component).

View Demo

See Also

message

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

Type:

String

Default Value: 'Required'

An error message can be specified as follows:

  • Hard-code the message

    jQuery
    index.js
    $(function() {
        $("#textBox").dxTextBox({ ... })
            .dxValidator({
                type: "required",
                message: "My custom message"
            });
    });
    Angular
    app.component.html
    app.module.ts
    <dx-text-box> 
        <dx-validator>
            <dxi-validation-rule 
                type="required" 
                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>
                <DxRequiredRule
                    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,
        DxRequiredRule
    } from 'devextreme-vue/validator';
    
    export default {
        components: {
            DxTextBox,
            DxValidator,
            DxRequiredRule
        }
    }
    </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,
        RequiredRule
    } from 'devextreme-react/validator';
    
    class App extends React.Component {
        render() {
            return (
                <TextBox>
                    <Validator>
                        <RequiredRule
                            message="My custom message" />
                    </Validator>
                </TextBox>
            );
        }
    }
    export default App;
  • Hide the message

    jQuery
    index.js
    $(function() {
        $("#textBox").dxTextBox({ ... })
            .dxValidator({
                type: "required",
                message: ""
            });
    });
    Angular
    app.component.html
    app.module.ts
    <dx-text-box>
        <dx-validator>
            <dxi-validation-rule 
                type="required" 
                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>
                <DxRequiredRule
                    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,
        DxRequiredRule
    } from 'devextreme-vue/validator';
    
    export default {
        components: {
            DxTextBox,
            DxValidator,
            DxRequiredRule
        }
    }
    </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,
        RequiredRule
    } from 'devextreme-react/validator';
    
    class App extends React.Component {
        render() {
            return (
                <TextBox>
                    <Validator>
                        <RequiredRule
                            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 "Password is required"
                validationRules: [{
                    type: "required"
                }]
            });
    });
    Angular
    app.component.html
    app.module.ts
    <dx-text-box>
        <!-- The error message will be "Password is required" -->
        <dx-validator name="Password">
            <dxi-validation-rule 
                type="required">
            </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 "Password is required" -->
            <DxValidator name="Password">
                <DxRequiredRule />
            </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,
        DxRequiredRule
    } from 'devextreme-vue/validator';
    
    export default {
        components: {
            DxValidator,
            DxRequiredRule
        }
    }
    </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,
        RequiredRule
    } from 'devextreme-react/validator';
    
    class App extends React.Component {
        render() {
            return (
                <TextBox>
                    {/* The error message will be "Password is required" */}
                    <Validator name="Password">
                        <RequiredRule} />
                    </Validator>
                </TextBox>
            );
        }
    }
    
    export default App;

trim

Indicates whether to remove the Space characters from the validated value.

Type:

Boolean

Default Value: true

To keep the Space characters within the validated value, set this field to false.

type

Specifies the rule type. Set it to "required" to use the RequiredRule.

Type:

String

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