Vue Validator - RequiredRule

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

import { RequiredRule } from "devextreme/common"
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

    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>
  • Hide the message

    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>
  • Display the editor's name in the message

    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>

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.