React Validator - RequiredRule

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

import { ValidationRulesTypes } from "devextreme-react/validation-rules"
Type: ValidationRulesTypes.RequiredRule

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.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.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.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.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.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.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'