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.

See Also
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

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 exposed by this widget.