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

    index.js
    • $(function() {
    • $("#textBox").dxTextBox({ ... })
    • .dxValidator({
    • type: "required",
    • message: "My custom message"
    • });
    • });
  • Hide the message

    index.js
    • $(function() {
    • $("#textBox").dxTextBox({ ... })
    • .dxValidator({
    • type: "required",
    • message: ""
    • });
    • });
  • Display the editor's name in the message

    index.js
    • $(function() {
    • $("#textBox").dxTextBox({ ... })
    • .dxValidator({
    • name: "Password", // The error message will be "Password is required"
    • validationRules: [{
    • type: "required"
    • }]
    • });
    • });

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'