UI Widgets ValidationGroup

The widget that is used in the Knockout and Angular approaches to combine the editors to be validated.

Included in: dx.phonejs.js, dx.webappjs.js, dx.all.js

Use the dxValidationGroup widget to combine the editors to be validated, the dxButton widget to validate these editors on button click and the dxValidationSummary widget to display validation errors occurred in these editors.

NOTE: Nested validation groups are not supported.

You can create the dxValidationGroup widget using one of the following approaches.

  • jQuery
    Use the validationGroup option in the widgets in which you need to specify a validation group.

    HTML
    <div id="textBox1"></div>
    <div id="textBox2"></div>
    <div id="summary"></div>
    <div id="button"></div>
    JavaScript
    var validationGroup = "sampleGroup";
     $("#textBox1").dxTextBox({})
        .dxValidator({
            validationRules: [],
            validationGroup: validationGroup
        });
    $("#textBox2").dxTextBox({})
        .dxValidator({
            validationRules: [],
            validationGroup: validationGroup
        });
    $("#summary").dxValidationSummary({
        validationGroup: validationGroup
    });
    $("#button").dxButton({
        validationGroup: validationGroup
        //...
    });
  • Knockout
    Add a div element and apply the dxValidationGroup binding to this element.

    HTML
    <div data-bind="dxValidationGroup : {}" >
        <div data-bind="dxTextBox: { },
            dxValidator: { validationRules: [] }">  
        </div>
        <div data-bind="dxTextBox: { },
            dxValidator: { validationRules: [] }"> 
        </div>  
        <div data-bind="dxValidationSummary: { }"></div>
        <div data-bind="dxButton: { }"></div>
    </div>
  • Angular
    Add a div element and apply the dx-validation-group directive to this element.

    HTML
    <div dx-validation-group="{}" ng-controller="demoController">
        <div dx-text-box="{  }"
            dx-validator="{ validationRules:  }">  
        </div>
        <div dx-text-box="{  }"
            dx-validator="{ validationRules:  }">  
        </div>
        <div dx-validation-summary="{  }"></div>
        <div dx-button="{ }"></div>
    </div>

Note that DevExtreme widgets require you to link the jQuery and Globalize libraries to your application. If you use the Knockout or Angular approach, the Knockout or Angular library is also required. For detailed information on linking these libraries to your project, refer to the Installation article.

For details on how to define validation groups and validate them, refer to the Validate Editor Values topic.

See Also

You can use the DevExpress.validationEngine.validateGroup(group) method to validate a particular validation group by passing its instance as a parameter.

JavaScript
DevExpress.validationEngine.validateGroup($("#sampleGroup").dxValidationGroup("instance"));

In addition, you can access a validation group's configuration using the DevExpress.validationEngine.getGroupConfig(group) method. The returned configuration exposes the validators included to the group, the validate() method to validate the editors that are associated with the validators and the validated event that occurs after the group is validated.

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div dx-validation-group="{}">
        <div ng-model="login" dx-text-box="{ placeholder: 'Login' }"
             dx-validator="{
                name: 'Login',
                validationRules: [{
                    type: 'required'
                }, {
                    type: 'pattern',
                    pattern: '^[a-zA-Z]+$',
                    message: 'Do not use digits.'
                }]
            }">
        </div>
        <div ng-model="password" dx-text-box="{ mode: 'password', placeholder:'Password' }"
             dx-validator="{
                validationRules: [{
                    type: 'required',
                    message: 'Password is required'
                }]
            }">
        </div>
        <div dx-validation-summary="{}"></div>
        <div dx-button="{ text: 'Validate and submit', onClick: validateAndSubmit }"></div>
    </div>
    <div dx-validation-group="{}">
        <div ng-model="phone" dx-text-box="{ placeholder: 'Input your phone...' }"
             dx-validator="{ name: 'phone', validationRules: [ { type: 'required' },{ type: 'numeric' } ] }">
        </div>
	    <div dx-validation-summary="{ }"></div>
	    <div dx-button="{ text: 'Submit', onClick: submit }"></div>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.login = "";
    $scope.password = "";
    $scope.phone = "";
    $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",
                    offset: 15
                }
            }, "success", 3000);
        }
    };
    $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']);
});
<div data-bind="dxValidationGroup: {}">
    <div data-bind="dxTextBox: {value: login, placeholder: 'Login'}, 
        dxValidator: {
            name: 'Login',
            validationRules: [{
                type: 'required'
            }, {
                type: 'pattern',
                pattern: '^[a-zA-Z]+$',
                message: 'Do not use digits.'
            }]
        }">
    </div>
    <div data-bind="dxTextBox: { value: password, mode: 'password', placeholder:'Password' },
        dxValidator: { 
            validationRules: [{
                type: 'required',
                message: 'Password is required'
            }]
        }"> 
	</div>
    <div data-bind="dxValidationSummary: {}"></div>
    <div data-bind="dxButton: { text: 'Validate and submit', onClick: validateAndSubmit }"></div>
</div>
<div data-bind="dxValidationGroup: {}">
    <div data-bind="dxTextBox: { value: phone, placeholder: 'Input your phone...' },
		dxValidator: {  name: 'phone', validationRules: [{ type: 'required' },{ type: 'numeric' }] }">
	</div>
	<div data-bind="dxValidationSummary: { }"></div>
	<div data-bind="dxButton: { text: 'Submit', onClick: submit }"></div>
</div>
var viewModel = {
    login: ko.observable(""),
    password: ko.observable(""),
    phone: 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);
        }
    },
    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(viewModel);

<div id="login"></div>
<div id="password"></div>
<div id="summary1"></div>
<div id="button1"></div>
<div id="phone"></div>
<div id="summary2"></div>
<div id="button2"></div>
var validationGroup1 = "group1";
var validationGroup2 = "group2";
$("#login").dxTextBox({
    value: null, placeholder: 'Login'    
}).dxValidator({
    name: 'Login',
    validationRules: [{
        type: 'required'
    }, {
        type: 'pattern',
        pattern: '^[a-zA-Z]+$',
        message: 'Do not use digits.'
    }],
    validationGroup: validationGroup1
});
$("#password").dxTextBox({
    mode: 'password', placeholder:'Password'
}).dxValidator({
    validationRules: [{
        type: 'required',
        message: 'Password is required'
    }],
    validationGroup: validationGroup1
});
$("#summary1").dxValidationSummary({
    validationGroup: validationGroup1
});
$("#button1").dxButton({
    text: 'Validate and submit',
    onClick: 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);
        }
    },
    validationGroup: validationGroup1
});
$("#phone").dxTextBox({
    value: null, placeholder: 'Input your phone...'
}).dxValidator({
    name: 'Phone',
    validationRules: [{ type: 'required' }, { type: 'numeric' }],
    validationGroup: validationGroup2
});
$("#summary2").dxValidationSummary({
    validationGroup: validationGroup2
});
$("#button2").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);
        }
    },
    validationGroup: validationGroup2
});

Configuration

An object defining configuration options for the dxValidationGroup widget.

Methods

This section describes members used to manipulate the widget.

Events

This section describes events fired by this widget.