The following values break RequiredRule:

• Falsy JavaScript values except 0, -0, 0n, and NaN.
• Invalid values for the target editor (for example, a non-numeric string for the NumberBox component).

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: "required",
      message: "My custom message"
  });

  Angular

  app.component.html

  app.module.ts

  <dx-text-box>
      <dx-validator>
          <dxi-validator-validation-rule
              type="required"
              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>
              <DxRequiredRule
                  message="My custom message"
              />
          </DxValidator>
      </DxTextBox>
  </template>
  
  <script setup lang="ts">
  import { DxTextBox } from 'devextreme-vue/text-box';
  import { DxValidator, DxRequiredRule } from 'devextreme-vue/validator';
  
  </script>

  React

  App.tsx

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

• Hide the message:

  jQuery

  index.js

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

  Angular

  app.component.html

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

  Vue

  App.vue

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

  React

  App.tsx

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

• Display the editor's name in the default message (for instance, "Password is required"):

  jQuery

  index.js

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

  Angular

  app.component.html

  <dx-text-box>
      <dx-validator name="Password">
          <dxi-validator-validation-rule
              type="required"
          ></dxi-validator-validation-rule>
      </dx-validator>
  </dx-text-box>

  Vue

  App.vue

  <template>
      <DxTextBox>
          <DxValidator name="Password">
              <DxRequiredRule />
          </DxValidator>
      </DxTextBox>
  </template>

  React

  App.tsx

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

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