React Common - Data Validation
This guide provides the detailed information on validation capabilities of DevExtreme editors. It describes how to validate a single editor or a group of editors, display the validation summary, perform remote validation, use a custom validation engine, etc.
Validate an Editor Value
Associate a DevExtreme editor with the Validator widget and specify validationRules to validate the editor. The full list of predefined validation rules is available in the Validation Rules Reference section.
Group the Editors
Editors belonging to a single Validation Group can be validated together. All editors on a page are automatically collected in a Default Validation Group, which is suitable when you do not need to validate collections of editors separately. In other cases, define Validation Groups as shown in the following code:
Validate the Group
You can validate any group by calling its validate() method in a Button's onClick event handler. You can access the Validation Group via the handler's argument. The Button always validates the group to which it belongs. If the membership is not specified, the Button validates the Default Validation Group.
Alternatively, you can validate a group using the DevExpress.validationEngine.validateGroup method. Call it without arguments to validate the Default Validation Group:
- DevExpress.validationEngine.validateGroup();
... or pass the group instance to validate a named group:
- DevExpress.validationEngine.validateGroup($("#loginGroup").dxValidationGroup("instance"));
Pass the group name instead of the instance if you have created widgets using jQuery.
- DevExpress.validationEngine.validateGroup("loginGroup");
Display Validation Errors
All group validation errors can be displayed in the ValidationSummary widget. The following code shows how to add this widget to a page. The commented-out codelines associate the Validation Summary with a named Validation Group.
Server-Side Validation
Use the "custom" validation rule that allows you to implement a custom validation function for server-side validation. In this function, perform an AJAX request and, when it succeeds, update the validation state and error message.
Validate a Custom Value
You can use the DevExtreme validation engine to validate a custom value, for example, a non-DevExtreme editor value or a concatenation of several editor values, by configuring the Validator's adapter option. The following example creates two text boxes and a button. A button click checks that at least one of these text boxes is filled. Their values are concatenated in the getValue function.
Knockout Only - Validate a View Model
Validating the view model object rather than the editors allows you to separate validation logic from the UI, reuse it between multiple views and unit-test the implementation. To validate a view model's observable, extend it with an object whose dxValidator field contains the validator configuration. After that, associate a target editor with the validator using the isValid and validationError options.
- $(function () {
- var viewModel = {
- login: ko.observable("").extend({
- dxValidator: {
- validationRules: [{ type: 'required', message: 'Login is required' }]
- }
- }),
- password: ko.observable("").extend({
- dxValidator: {
- name: "Password",
- validationRules: [{ type: 'required' }]
- }
- })
- };
- ko.applyBindings(viewModel);
- });
- <div data-bind="dxTextBox: {
- value: login,
- placeholder: 'Login',
- isValid: login.dxValidator.isValid,
- validationError: login.dxValidator.validationError
- }"></div>
- <div data-bind="dxTextBox: {
- value: password,
- mode: 'password',
- placeholder: 'Password',
- isValid: password.dxValidator.isValid,
- validationError: password.dxValidator.validationError
- }"></div>
Finally, pass the to the DevExpress.validationEngine.registerModelForValidation(model) method to register it in the validation engine. The registered view model can be validated at any point in your application by calling the DevExpress.validationEngine.validateModel(model) method.
- var viewModel = {
- //...
- validateAndLogin: function (params) {
- var result = DevExpress.validationEngine.validateModel(this);
- if (result.isValid) {
- // ...
- }
- }
- };
- DevExpress.validationEngine.registerModelForValidation(viewModel);
- ko.applyBindings(viewModel);
If you have technical questions, please create a support ticket in the DevExpress Support Center.