Validation Rules CustomRule

A validation rule with custom validation logic.

Type: Object

To specify the function that will validate the target value, use the rule's validationCallback configuration option.

NOTE: You can use the 'custom' rule for remote scenarios.

See Also
Show Example:
AngularJS
Knockout
jQuery

In this example, the 'custom' rule is applied to the 'Password' editor. This rule demands that the length of the editor value equals to or more than 4. To check this rule, specify a password with a length less than 4.

<div style="height:200px;max-width:200px;margin:0px auto" ng-controller="demoController">
    <div dx-text-box="{ bindingOptions: {value: 'login'}, placeholder: 'Login' }" 
        dx-validator="{ validationRules: [{ type: 'required', message: 'Login is required' }] }">        
    </div>
    <div dx-text-box="{ bindingOptions: {value: 'password'}, mode: 'password', placeholder: 'Password' }" 
        dx-validator="{ validationRules: [
            { type: 'required', message: 'Password can not be empty' },
            { type: 'custom', validationCallback: checkPasswordLength }
        ] }">        
    </div>
	<div dx-validation-summary="{ }"></div>
	<div dx-button="{ text: 'Register', onClick: validateAndLogin }"></div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.login = "Alex";
    $scope.password = "";
    $scope.validateAndLogin = function (params) {
        var result = params.validationGroup.validate();
        if (result.isValid) {
            DevExpress.ui.notify({
                message: "You are logged in as '" + $scope.login + "'",
                position: {
                    my: "left top",
                    at: "left top",
                }
            }, "Success", 3000);
        }
    };
    $scope.checkPasswordLength = function (options) {
        
        if (options.value.length < 4) {
            options.rule.message = "The password is too short. The password length must be more than 4.";
            return false;
        } else { return true; }
    }
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});

In this example, the 'custom' rule is applied to the 'Password' editor. This rule demands that the length of the editor value equals to or more than 4. To check this rule, specify a password with a length less than 4.

<div style="height:200px;max-width:200px;margin:0px auto">
	<div data-bind="dxTextBox: { value: login, placeholder: 'Login' },
		dxValidator: { validationRules: [{ type: 'required', message: 'Login is required' }] }">	   
	</div>		
	<div data-bind="dxTextBox: { value: password, mode: 'password', placeholder: 'Password' },
		dxValidator: {  validationRules: [{ type: 'required', message: 'Password can not be empty' },
            { type: 'custom', validationCallback: checkPasswordLength }] }">
	</div>
	<div data-bind="dxValidationSummary: { }"></div>
	<div data-bind="dxButton: { text: 'Register', onClick: validateAndLogin }"></div>
</div>
var myViewModel = {
    login: ko.observable("Alex"),
    password: ko.observable(""),
    validateAndLogin: function (params) {
        var result = params.validationGroup.validate();
        if (result.isValid) {
            DevExpress.ui.notify({
                message: "You are logged in as '" + this.login() + "'",
                position: {
                    my: "left top",
                    at: "left top",
                }
            }, "Success", 3000);
        }
    },
    checkPasswordLength: function (options) {
        if (options.value.length < 4) {
            options.rule.message = "The password is too short. The password length must be more than 4.";
            return false;
        } else {return true;}
    }
}
ko.applyBindings(myViewModel);

In this example, the 'custom' rule is applied to the 'Password' editor. This rule demands that the length of the editor value equals to or more than 4. To check this rule, specify a password with a length less than 4.

<div style="height:200px;max-width:200px;margin:0px auto">
    <div id="login"></div>
    <div id="password"></div>
    <div id="summary"></div>
    <div id="button"></div>
</div>
$(function () {
$("#login").dxTextBox({
    value: 'Alex', placeholder: 'Login'
}).dxValidator({
    validationRules: [{ type: 'required', message: 'Login is required' }]
});
$("#password").dxTextBox({
    value: null, mode: 'password', placeholder: 'Password'
}).dxValidator({
    validationRules: [
        { type: 'required', message: 'Password can not be empty' },
        { type: 'custom', validationCallback: function (options) {
                if (options.value.length < 4) {
                    options.rule.message = "The password is too short. The password length must be more than 4.";
                    return false;
                } else { return true; }
            }
        }
    ]
});
$("#summary").dxValidationSummary({});
$("#button").dxButton({
    text: 'Register',
    onClick: function (params) {
        var result = params.validationGroup.validate();
        if (result.isValid) {
            var login = $("#login").dxTextBox('instance').option('value');
            DevExpress.ui.notify({
                message: "You are logged in as '" + login + "'",
                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: 'Value is invalid'

You do not have to specify this field. In this instance, 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.

If you assign an empty string to the message field, the message will not be shown.

reevaluate

Indicates whether the rule should be always checked for the target value or only when the target value changes.

Type: Boolean
Default Value: false

type

Specifies the type of the current rule.

Type: String
Accepted Values: 'custom'

Set this field to 'custom' to define a rule that will be broken as a result of custom validation performed by the validationCallback function.

validationCallback

A function that validates the target value.

Type: function
Function parameters:
options: Object
An object defining validation parameters.
Object structure:
value: String|Number
The validated value.
rule: Object
The current rule object that exposes user-defined options, the isValid and message fields, and the rule type specific fields.
validator: Object
The dxValidator object that caused the validation.
Return Value: true|false
A Boolean value that indicates whether the validated value is valid against the checked rule.

In this function, you should indicate whether or not the validated value breaks the current rule. To access the validated value, use the value field of the parameter passed to the function. To access the current rule, use the rule field of the function parameter. Set the rule's isValid field. In addition, you can specify the rule's message field, as well as other fields that are specific for the current rule type, which is specified by the rule's type field.

As an alternative to the rule's isValid field, you can use the function's return value to specify the validation result.