Validator Validation Rules

This section lists validation rules that can be used within the dxValidator.

CompareRule

A validation rule that demands that a validated editor has a value that equals to a specified expression.

Type: Object

To specify the expression that the validated field must match, set the rule's comparisonTarget configuration option. Assign a function to this option. The validated value will be compared to the function's return value. The comparison will be performed by using the operator that is set for the comparisonType option.

Show Example:
AngularJS
Knockout
jQuery

In this example, the 'compare' rule is applied to the 'Confirm your password' editor. This rule demands that the value of this editor equals to the value specified within the 'Password' editor. To check this rule, specify different passwords in the editors.

<div style="height:200px;max-width:200px;margin:0px auto" ng-controller="demoController">
    <div dx-text-box="{ bindingOptions: {value: 'password'}, mode: 'password', placeholder: 'Password' }" 
        dx-validator="{ validationRules: [{ type: 'required', message: 'Password can not be empty.' }] }">        
    </div>
    <div dx-text-box="{ bindingOptions: {value: 'confirmedPassword'}, mode: 'password', placeholder: 'Confirm your password' }" 
        dx-validator="{ validationRules: [{ type: 'compare', comparisonTarget: comparisonTarget }] }">        
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.password = "";
    $scope.confirmedPassword = "";
    $scope.comparisonTarget = function () {
        if ($scope.password) {            
            return $scope.password;
        }
    }
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});

In this example, the 'compare' rule is applied to the 'Confirm your password' editor. This rule demands that the value of this editor equals to the value specified within the 'Password' editor. To check this rule, specify different passwords in the editors.

<div style="height:200px;max-width:200px;margin:0px auto">	
    <div id="password1" data-bind="dxTextBox: { value: password, mode: 'password', placeholder: 'Password' },
        dxValidator: {  validationRules: [{ type: 'required', message: 'Password can not be empty.' }] }">
    </div>
    <div id="password2" data-bind="dxTextBox: { value: confirmedPassword, mode: 'password', placeholder: 'Confirm your password' },
        dxValidator: {  validationRules: [{ type: 'compare', comparisonTarget: comparisonTarget }] }">
    </div>	
</div>
var myViewModel = {
    password: ko.observable(""),
    confirmedPassword: ko.observable(""),
    comparisonTarget: function () {
        if (myViewModel.password()) {
            return myViewModel.password();
        }
    }
}
ko.applyBindings(myViewModel);

In this example, the 'compare' rule is applied to the 'Confirm your password' editor. This rule demands that the value of this editor equals to the value specified within the 'Password' editor. To check this rule, specify different passwords in the editors.

<div style="height:200px;max-width:200px;margin:0px auto">
    <div id="password1"></div>
    <div id="password2"></div>
</div>
    $("#password1").dxTextBox({
        value: null, mode: 'password', placeholder: 'Password'
    }).dxValidator({
        validationRules: [{ type: 'required', message: 'Password can not be empty.' }]
    });
    $("#password2").dxTextBox({
        value: null, mode: 'password', placeholder: 'Confirm your password' 
    }).dxValidator({
        validationRules: [{
            type: 'compare',
            comparisonTarget: function () {
                var password1 = $("#password1").dxTextBox('instance').option('value');
                if (password1) {
                    return password1;
                }
            }
        }]
    });

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.

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 equal 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 equal 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 equal 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);
        }
    }
});
});

EmailRule

A validation rule that demands that the validated field match the Email pattern.

Type: Object

Show Example:
AngularJS
Knockout
jQuery

In this example, the 'email' rule is applied to the 'Email' editor. This rule demands that the editor value match the Email pattern. To check this rule, specify a wrong email.

<div style="height:200px;max-width:200px;margin:0px auto" ng-controller="demoController">
    <div dx-text-box="{ bindingOptions: {value: 'email'},  mode: 'email', placeholder: 'Email' }" 
        dx-validator="{ validationRules: [
            { type: 'required', message: 'Email is required' },
            { type: 'email' }
        ] }">        
    </div>
    <div dx-text-box="{ bindingOptions: {value: 'password'}, mode: 'password', placeholder: 'Password' }" 
        dx-validator="{ validationRules: [ { type: 'required', message: 'Password can not be empty.' } ] }">        
    </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.email = "";
    $scope.password = "";
    $scope.validateAndLogin = function (params) {
        var result = params.validationGroup.validate();
        if (result.isValid) {
            DevExpress.ui.notify({
                message: "You are logged in by the '" + $scope.email + "' email.",
                position: {
                    my: "left top",
                    at: "left top",
                }
            }, "Success", 3000);
        }
    }
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});

In this example, the 'email' rule is applied to the 'Email' editor. This rule demands that the editor value match the Email pattern. To check this rule, specify a wrong email.

<div style="height:200px;max-width:200px;margin:0px auto">
	<div data-bind="dxTextBox: { value: email, mode: 'email', placeholder: 'Email' },
		dxValidator: { validationRules: [
            { type: 'required', message: 'Email is required' },
            { type: 'email' }
        ] }">	   
	</div>		
	<div data-bind="dxTextBox: { value: password, mode: 'password', placeholder: 'Password' },
		dxValidator: {  validationRules: [{ type: 'required', message: 'Password can not be empty.' }] }">
	</div>
	<div data-bind="dxValidationSummary: { }"></div>
	<div data-bind="dxButton: { text: 'Register', onClick: validateAndLogin }"></div>
</div>
var myViewModel = {
    email: ko.observable(""),
    password: ko.observable(""),
    validateAndLogin: function (params) {
        var result = params.validationGroup.validate();
        if (result.isValid) {
            DevExpress.ui.notify({
                message: "You are logged in by the '" + this.email() + "' email.",
                position: {
                    my: "left top",
                    at: "left top",
                }
            }, "Success", 3000);
        }
    },
}
ko.applyBindings(myViewModel);

In this example, the 'email' rule is applied to the 'Email' editor. This rule demands that the editor value match the Email pattern. To check this rule, specify a wrong email.

<div style="height:200px;max-width:200px;margin:0px auto">
    <div id="email"></div>
    <div id="password"></div>
    <div id="summary"></div>
    <div id="button"></div>
</div>
$(function () {
    $("#email").dxTextBox({
        value: null, mode: 'email', placeholder: 'Email'
    }).dxValidator({
        validationRules: [
            { type: 'required', message: 'Email is required' },
            { type: 'email' }
        ]
    });
    $("#password").dxTextBox({
        value: null, mode: 'password', placeholder: 'Password'
    }).dxValidator({
        validationRules: [ { type: 'required', message: 'Password can not be empty.' } ]
    });
    $("#summary").dxValidationSummary({});
    $("#button").dxButton({
        text: 'Register',
        onClick: function (params) {
            var result = params.validationGroup.validate();
            if (result.isValid) {
                var email = $("#email").dxTextBox('instance').option('value');
                DevExpress.ui.notify({
                    message: "You are logged in by the '" + email + "' email.",
                    position: {
                        my: "left top",
                        at: "left top",
                    }
                }, "Success", 3000);
            }
        }
    });
});

NumericRule

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

Type: Object

Show Example:
AngularJS
Knockout
jQuery

In this example, the 'numeric' rule is applied to the editor. This rule demands that the editor has a numeric value. To check this rule, specify a string in the editor.

<div style="height:200px;max-width:200px;margin:0px auto" ng-controller="demoController">
    <div dx-text-box="{ bindingOptions: {value: 'phone'},  placeholder: 'Input your phone...' }" 
        dx-validator="{ validationRules: [ { type: 'numeric' } ] }">        
    </div>
	<div dx-validation-summary="{ }"></div>
	<div dx-button="{ text: 'Submit', onClick: submit }"></div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.phone = "";
    $scope.submit = function (params) {
        var result = params.validationGroup.validate();
        if (result.isValid) {
            DevExpress.ui.notify({
                message: "Your phone number is submitted.",
                position: {
                    my: "left top",
                    at: "left top",
                }
            }, "Success", 3000);
        }
    }
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});

In this example, the 'numeric' rule is applied to the editor. This rule demands that the editor has a numeric value. To check this rule, specify a string in the editor.

<div style="height:200px;max-width:200px;margin:0px auto">
	<div data-bind="dxTextBox: { value: phone, placeholder: 'Input your phone...' },
		dxValidator: {  validationRules: [{ type: 'numeric' }] }">
	</div>
	<div data-bind="dxValidationSummary: { }"></div>
	<div data-bind="dxButton: { text: 'Submit', onClick: submit }"></div>
</div>
var myViewModel = {
    phone: ko.observable(""),
    submit: function (params) {
        var result = params.validationGroup.validate();
        if (result.isValid) {
            DevExpress.ui.notify({
                message: "Your phone number is submitted.",
                position: {
                    my: "left top",
                    at: "left top",
                }
            }, "Success", 3000);
        }
    }
}
ko.applyBindings(myViewModel);

In this example, the 'numeric' rule is applied to the editor. This rule demands that the editor has a numeric value. To check this rule, specify a string in the editor.

<div style="height:200px;max-width:200px;margin:0px auto">
    <div id="phone"></div>
    <div id="summary"></div>
    <div id="button"></div>
</div>
$(function () {
    $("#phone").dxTextBox({
        value: null, placeholder: 'Input your phone...'
    }).dxValidator({
        validationRules: [ { type: 'numeric' } ]
    });
    $("#summary").dxValidationSummary({});
    $("#button").dxButton({
        text: 'Submit',
        onClick: function (params) {
            var result = params.validationGroup.validate();
            if (result.isValid) {
                DevExpress.ui.notify({
                    message: "Your phone number is submitted.",
                    position: {
                        my: "left top",
                        at: "left top",
                    }
                }, "Success", 3000);
            }
        }
    });
});

PatternRule

A validation rule that demands that the validated field match a specified pattern.

Type: Object

To specify the regular expression that the validated field must match, set the rule's pattern configuration option.

Show Example:
AngularJS
Knockout
jQuery

In this example, the 'pattern' rule is applied to the 'Login' editor. This rule demands that the editor value has no digits. To check this rule, use digits when specifying a login.

<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' },
            {type: 'pattern', pattern: '^[a-zA-Z]+$', message: 'Do not use digits in your login!'}
        ] }">        
    </div>
    <div dx-text-box="{ bindingOptions: {value: 'password'}, mode: 'password', placeholder: 'Password' }" 
        dx-validator="{ validationRules: [ { type: 'required', message: 'Password can not be empty.' } ] }">        
    </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 = "";
    $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);
        }
    }
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});

In this example, the 'pattern' rule is applied to the 'Login' editor. This rule demands that the editor value has no digits. To check this rule, use digits when specifying a login.

<div style="height:200px;max-width:200px;margin:0px auto" data-bind="dxValidationGroup : {}">
	<div data-bind="dxTextBox: { value: login, placeholder: 'Login' },
        dxValidator: { validationRules: [
            { type: 'required', message: 'Login is required' },
            {type: 'pattern', pattern: '^[a-zA-Z]+$', message: 'Do not use digits in your login!'}
        ] }">	   
	</div>		
    <div data-bind="dxTextBox: { value: password, mode: 'password', placeholder: 'Password' },
        dxValidator: {  validationRules: [{ type: 'required', message: 'Password can not be empty.' }] }">
    </div>
    <div data-bind="dxValidationSummary: { }"></div>
    <div data-bind="dxButton: { text: 'Register', onClick: validateAndLogin }"></div>
</div>
var myViewModel = {
    login: ko.observable(""),
    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);
        }
    },
}
ko.applyBindings(myViewModel);

In this example, the 'pattern' rule is applied to the 'Login' editor. This rule demands that the editor value has no digits. To check this rule, use digits when specifying a login.

<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: null, placeholder: 'Login'
    }).dxValidator({
        validationRules: [
            { type: 'required', message: 'Login is required' },
            { type: 'pattern', pattern: '^[a-zA-Z]+$', message: 'Do not use digits in your login!' }
        ]
    });
    $("#password").dxTextBox({
        value: null, mode: 'password', placeholder: 'Password'
    }).dxValidator({
        validationRules: [{ type: 'required', message: 'Password can not be empty.' }]
    });
    $("#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);
            }
        }
    });
});

RangeRule

A validation rule that demands the target value be within the specified value range (including the range's end points).

Type: Object

To specify the range that the validated value must match, set the rule's min and max configuration options. Note that the specified range can be on a date-time or numeric scale. To validate a value against a string length, use the stringLength rule.

Show Example:
AngularJS
Knockout
jQuery

In this example, the 'range' rule is applied to the editor. This rule demands that the editor value be within 25 and 35. To check this rule, specify a value out of this range.

<div style="height:200px;max-width:200px;margin:0px auto" ng-controller="demoController">
    <div dx-text-box="{ bindingOptions: {value: 'age'},  placeholder: 'Input your age...' }" 
        dx-validator="{ validationRules: [ 
            { type: 'required' },
            { type: 'range', min: 25, max: 35, message: 'Sorry, we submit only the age from 25 to 35.' }
        ] }">        
    </div>
    <div dx-validation-summary="{ }"></div>
    <div dx-button="{ text: 'Submit', onClick: submit }"></div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.age = "";
    $scope.submit = function (params) {
        var result = params.validationGroup.validate();
        if (result.isValid) {
            DevExpress.ui.notify({
                message: "Your age is submitted.",
                position: {
                    my: "left top",
                    at: "left top",
                }
            }, "Success", 3000);
        }
    }
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});

In this example, the 'range' rule is applied to the editor. This rule demands that the editor value be within 25 and 35. To check this rule, specify a value out of this range.

<div style="height:200px;max-width:200px;margin:0px auto">
    <div data-bind="dxTextBox: { value: age, placeholder: 'Input your age...' },
        dxValidator: { validationRules: [
            { type: 'required' },
            {type: 'range', min: 25, max: 35, message: 'Sorry, we submit only the age from 25 to 35.' }
        ] }">	   
    </div>		
    <div data-bind="dxValidationSummary: { }"></div>
    <div data-bind="dxButton: { text: 'Submit', onClick: submit }"></div>
</div>
var myViewModel = {
    age: ko.observable(""),
    submit: function (params) {
        var result = params.validationGroup.validate();
        if (result.isValid) {
            DevExpress.ui.notify({
                message: "Your age is submitted.",
                position: {
                    my: "left top",
                    at: "left top",
                }
            }, "Success", 3000);
        }
    },
}
ko.applyBindings(myViewModel);

In this example, the 'range' rule is applied to the editor. This rule demands that the editor value be within 25 and 35. To check this rule, specify a value out of this range.

<div style="height:200px;max-width:200px;margin:0px auto">
    <div id="age"></div>
    <div id="summary"></div>
    <div id="button"></div>
</div>
$(function () {
    $("#age").dxTextBox({
        value: null, placeholder: 'Input your age...'
    }).dxValidator({
        validationRules: [
            { type: 'required' },
            { type: 'range', min: 25, max: 35, message: 'Sorry, we submit only the age from 25 to 35.' }
        ]
    });
    $("#summary").dxValidationSummary({});
    $("#button").dxButton({
        text: 'Submit',
        onClick: function (params) {
            var result = params.validationGroup.validate();
            if (result.isValid) {
                DevExpress.ui.notify({
                    message: "Your age is submitted.",
                    position: {
                        my: "left top",
                        at: "left top",
                    }
                }, "Success", 3000);
            }
        }
    });
});

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);
            }
        }
    });
});

StringLengthRule

A validation rule that demands the target value length be within the specified value range (including the range's end points).

Type: Object

To specify the range that the validated value length must match, set the rule's min and max configuration options.

NOTE: This rule validates string values or the values that can be cast to a string.

Show Example:
AngularJS
Knockout
jQuery

In this example, the 'stringLength' rule is applied to the 'Password' editor. This rule demands that the editor value length be from 4 to 6 symbols. To check this rule, specify a password with a length out of this range.

<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: 'stringLength', min: 4, max: 6, message: 'Password length should be in a range from 4 to 6 symbols.' }
        ] }">        
    </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);
        }
    }
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});

In this example, the 'stringLength' rule is applied to the 'Password' editor. This rule demands that the editor value length be from 4 to 6 symbols. To check this rule, specify a password with a length out of this range.

<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: 'stringLength', min: 4, max: 6, message: 'Password length should be in a range from 4 to 6 symbols.' }
        ] }">
    </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);
        }
    },
}
ko.applyBindings(myViewModel);

In this example, the 'stringLength' rule is applied to the 'Password' editor. This rule demands that the editor value length be from 4 to 6 symbols. To check this rule, specify a password with a length out of this range.

<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: 'stringLength', min: 4, max: 6, message: 'Password length should be in a range from 4 to 6 symbols.' }
        ]
    });
    $("#summary").dxValidationSummary({});
    $("#button").dxButton({
        text: '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 logged in as '" + login + "'",
                    position: {
                        my: "left top",
                        at: "left top",
                    }
                }, "Success", 3000);
            }
        }
    });
});