Validation Rules 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.
  • If the specified value has a type that is not expected for the target field (e.g., a string for the dxDateBox widget).
Show Example:
AngularJS
Knockout
jQuery
<div style="height:800px;max-width:400px;margin:0px auto" ng-controller="demoController">
    <div dx-text-box="{ bindingOptions: {value: 'name'},  placeholder: 'Name' }" 
        dx-validator="{ name: 'Name', validationRules: [ { type: 'required' } ] }">        
    </div>
   <div dx-select-box="{ dataSource: ['Ground', '1','2','3'], placeholder: 'Floor #' }"
        dx-validator="{ name: 'Floor', validationRules: [ { type: 'required' } ] }">        
    </div>
    <div dx-number-box="{ bindingOptions: {value: 'age'}, placeholder: 'Age'}"
        dx-validator="{ name: 'Age', validationRules: [ { type: 'required' } ] }">        
    </div>
    <div dx-autocomplete="{ placeholder: 'Room Type',
            dataSource: ['Suite','One-Bedroom Suite','Two-Bedroom King Suite','King Room']
        }"
        dx-validator="{ name: 'Room Type', validationRules: [ { type: 'required' } ] }">        
    </div>
    <div dx-radio-group="{ dataSource: [{ text: 'Ocean' }, { text: 'Mountains' }, { text: 'Slave market' }], layout:'vertical'}"
        dx-validator="{ name: 'Room View', validationRules: [ { type: 'required', message: 'Room View is not chosen' } ] }">        
    </div>
    <div dx-lookup="{ searchEnabled: false, displayExpr: 'name', valueExpr: 'this', title: 'States',
            dataSource: [{ id: 1, name: 'South' }, { id: 2, name: 'North' }, { id: 3, name: 'North-East' }] }"
        dx-validator="{ name: 'Building', validationRules: [ { type: 'required' } ] }">        
    </div>
    <div dx-calendar="{}"
        dx-validator="{ name: 'Check In Date', validationRules: [ { type: 'required' } ] }">        
    </div>
    <div dx-date-box="{ value: undefined, useCalendar: true, placeholder: 'Check Out', width: 200 }"
        dx-validator="{ name: 'Check Out Date', validationRules: [ { type: 'required' } ] }">        
    </div>
    <div dx-check-box="{ value: false,  text: 'I agree with the your conditions.' }"
        dx-validator="{ name: 'Agreement', validationRules: [ { type: 'required' } ] }">        
    </div>
    <div dx-validation-summary="{ }"></div>
    <div dx-button="{ text: 'Validate and submit', onClick: validateAndSubmit }"></div>

</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.name = "";
    $scope.age = "";
    $scope.validateAndSubmit = function (params) {
        var result = params.validationGroup.validate();
        if (result.isValid) {
            DevExpress.ui.notify({
                message: "You are registered",
                position: {
                    my: "left top",
                    at: "left top",
                }
            }, "Success", 3000);
        }
    }
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
<div style="height:800px;max-width:400px;margin:0px auto">
    <div data-bind="dxTextBox: { value: name, placeholder: 'Name' },
        dxValidator: { name: 'Name', validationRules: [{ type: 'required' }]}"></div>
    <div data-bind="dxSelectBox: { dataSource: ['Ground', '1','2','3'], placeholder: 'Floor #' },
        dxValidator: { name: 'Floor', validationRules: [{ type: 'required' }]}"></div>
    <div data-bind="dxNumberBox: { value: age, placeholder: 'Age' },
        dxValidator: { name: 'Age',  validationRules: [{ type: 'required' }]}"></div>
    <div data-bind="dxAutocomplete: { placeholder: 'Room Type', displayExpr: 'text',
            dataSource: [{ text: 'Suite' }, { text: 'One-Bedroom Suite' }, { text: 'Two-Bedroom King Suite' }, { text: 'King Room' }] },
        dxValidator: { name: 'Room Type', validationRules: [{ type: 'required'}]}"></div>	
    <div data-bind="dxRadioGroup: { dataSource: [{ text: 'Ocean' }, { text: 'Mountains' }, { text: 'Slave market' }], layout:'vertical' },
        dxValidator: { name: 'Room View', validationRules: [{ type: 'required', message: 'Room View is not chosen' }]}">
    </div>
	<div data-bind="dxLookup: { searchEnabled: false, displayExpr: 'name', valueExpr: 'this', title: 'States',
            dataSource: [{ id: 1, name: 'South' }, { id: 2, name: 'North' }, { id: 3, name: 'North-East' }] },
        dxValidator: { name: 'Building', validationRules: [{ type: 'required' }]}">
    </div>
    <div data-bind="dxCalendar: { }, dxValidator: { name: 'Check In Date', validationRules: [{ type: 'required' }]}"></div>
    <div data-bind="dxDateBox: { value: undefined, useCalendar: true, placeholder: 'Check Out', width: 200},
        dxValidator: { name: 'Check Out Date', validationRules: [{ type: 'required' }]}"></div>	
    <div data-bind="dxCheckBox: { value: false,  text: 'I agree with the your conditions.' },
        dxValidator: { name: 'Agreement', validationRules: [{ type: 'required' }]}"></div>	
    <div data-bind="dxValidationSummary: { }"></div>
    <div style="margin-bottom:10px; margin-top:20px" data-bind="dxButton: { text: 'Validate and submit', onClick: validateAndSubmit }"></div>
</div>
var myViewModel = {
    name: ko.observable(""),
    age: ko.observable(),
    validateAndSubmit: function (params) {
        var result = params.validationGroup.validate();
        if (result.isValid) {
            DevExpress.ui.notify({
                message: "You are registered",
                position: {
                    my: "left top",
                    at: "left top",
                    offset: 15
                }
            }, "success", 3000);
        }
    },
}
ko.applyBindings(myViewModel);
<div style="height:800px;max-width:400px;margin:0px auto">
    <div id="Name"></div>
    <div id="Floor"></div>
    <div id="Age"></div>
    <div id="RoomType"></div>
    <div id="RoomView"></div>
    <div id="Building"></div>
    <div id="CheckInDate"></div>
    <div id="CheckOutDate"></div>
    <div id="Agreement"></div>
    <div id="summary"></div>
    <div id="button"></div>
</div>
$(function () {
    $("#Name").dxTextBox({
        value: null, placeholder: 'Name'
    }).dxValidator({
        name: 'Name', validationRules: [{ type: 'required' }]
    });
    $("#Floor").dxSelectBox({
        dataSource: ['Ground', '1','2','3'], placeholder: 'Floor #'
    }).dxValidator({
        name: 'Floor', validationRules: [{ type: 'required' }]
    });
    $("#Age").dxNumberBox({
        value: null, placeholder: 'Age'
    }).dxValidator({
        name: 'Age', validationRules: [{ type: 'required' }]
    });
    $("#RoomType").dxAutocomplete({
        placeholder: 'Room Type',
        dataSource: ['Suite', 'One-Bedroom Suite','Two-Bedroom King Suite','King Room']
    }).dxValidator({
        name: 'Room Type', validationRules: [{ type: 'required' }]
    });
    $("#RoomView").dxRadioGroup({
        dataSource: [{ text: 'Ocean' }, { text: 'Mountains' }, { text: 'Slave market' }], layout:'vertical'
    }).dxValidator({
        name: 'Room View', validationRules: [{ type: 'required', message: 'Room View is not chosen' }]
    });
    $("#Building").dxLookup({ searchEnabled: false, displayExpr: 'name', valueExpr: 'this', title: 'States',
        dataSource: [{ id: 1, name: 'South' }, { id: 2, name: 'North' }, { id: 3, name: 'North-East' }] 
    }).dxValidator({
        name: 'Building', validationRules: [{ type: 'required' }]
    });
    $("#CheckInDate").dxCalendar({}).dxValidator({
        name: 'Check in Date', validationRules: [{ type: 'required' }]
    });
    $("#CheckOutDate").dxDateBox({
        value: null, useCalendar: true, placeholder: 'Check Out', width: 200
    }).dxValidator({
        name: 'Check out Date', validationRules: [{ type: 'required' }]
    });
    $("#Agreement").dxCheckBox({
        value: false,  text: 'I agree with the your conditions.'
    }).dxValidator({
        name: 'Agreement', validationRules: [{ type: 'required' }]
    });
    $("#summary").dxValidationSummary({});
    $("#button").dxButton({
        text: 'Validate and submit',
        onClick: function (params) {
            var result = params.validationGroup.validate();
            if (result.isValid) {
                var login = $("#login").dxTextBox('instance').option('value');
                DevExpress.ui.notify({
                    message: "You are registered",
                    position: {
                        my: "left top",
                        at: "left top",
                    }
                }, "Success", 3000);
            }
        }
    });
});

message

Specifies the message that is shown for end-users if the current rule is broken.

Type: String
Default Value: 'Required'

You do not have to specify this field. If you chose not to specify it, a default message will be shown. To include the name of the validated editor into the default validation message as a subject, set the name field of the dxValidator object.

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 type of the current rule.

Type: String
Accepted Values: 'required'

Set this field to 'required' to define a rule that will be broken if the validated value is not specified.