ValidationGroup
The widget that is used in the Knockout and AngularJS approaches to combine the editors to be validated.
Use the ValidationGroup widget to combine the editors to be validated, the Button widget to validate these editors on button click and the ValidationSummary widget to display validation errors occurred in these editors.
You can create the ValidationGroup widget using one of the following approaches.
-
HTMLJavaScript
<div id="textBox1"></div> <div id="textBox2"></div> <div id="summary"></div> <div id="button"></div>
$(function() { var validationGroupName = "sampleGroup"; $("#textBox1").dxTextBox({ name: 'FirstName' }) .dxValidator({ validationRules: [ // ... ], validationGroup: validationGroupName }); $("#textBox2").dxTextBox({ name: 'LastName' }) .dxValidator({ validationRules: [ // ... ], validationGroup: validationGroupName }); $("#summary").dxValidationSummary({ validationGroup: validationGroupName }); $("#button").dxButton({ validationGroup: validationGroupName //... }); });
-
HTML
<dx-validation-group> <dx-text-box name="FirstName"> <dx-validator> <dxi-validation-rule type="required" message="First name is required"></dxi-validation-rule> . . . </dx-validator> </dx-text-box> <dx-text-box name="LastName"> <dx-validator> <dxi-validation-rule type="required" message="Last name is required"></dxi-validation-rule> . . . </dx-validator> </dx-text-box> <dx-validation-summary></dx-validation-summary> <dx-button></dx-button> </dx-validation-group>
-
HTML
<div dx-validation-group="{ }" ng-controller="DemoController"> <div dx-text-box="{ name: 'FirstName' }" dx-validator="{ validationRules: [ // ... ] }"> </div> <div dx-text-box="{ name: 'LastName' }" dx-validator="{ validationRules: [ // ... ] }"> </div> <div dx-validation-summary="{ }"></div> <div dx-button="{ }"></div> </div>
-
HTML
<div data-bind="dxValidationGroup: { }" > <div data-bind="dxTextBox: { name: 'FirstName' }, dxValidator: { validationRules: [ // ... ] }"> </div> <div data-bind="dxTextBox: { name: 'LastName' }, dxValidator: { validationRules: [ // ... ] }"> </div> <div data-bind="dxValidationSummary: { }"></div> <div data-bind="dxButton: { }"></div> </div>
-
Razor C#Razor VB
using (Html.DevExtreme().ValidationGroup()) { @(Html.DevExtreme().TextBox() .Name("FirstName") ) @(Html.DevExtreme().TextBox() .Name("LastName") ) @(Html.DevExtreme().ValidationSummary()) @(Html.DevExtreme().Button() .Text("Validate") .OnClick(@<text> function validate (params) { params.validationGroup.validate(); } </text>) ) }
@Using (Html.DevExtreme().ValidationGroup()) @(Html.DevExtreme().TextBox() _ .Name("FirstName") ) @(Html.DevExtreme().TextBox() _ .Name("LastName") ) @(Html.DevExtreme().ValidationSummary()) @(Html.DevExtreme().Button() _ .Text("Validate") _ .OnClick("validate") ) End Using <script> function validate(params) { params.validationGroup.validate(); } </script>
Note that DevExtreme widgets require you to link the jQuery library to your application. If you use the Knockout or AngularJS approach, the Knockout or AngularJS library is also required. For detailed information on linking these libraries to your project, refer to the topics in the Installation section.
See Also
- Validation Engine
- Validation Engine - MVVM Approach
- ASP.NET MVC Wrappers - Validate a Group of Editors
You can use the DevExpress.validationEngine.validateGroup(group) method to validate a particular validation group by passing its instance as a parameter.
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.
Configuration
An object defining configuration options for the ValidationGroup widget.
Name | Description |
---|---|
elementAttr | Specifies the attributes to be attached to the widget's root element. |
height | Specifies the height of the widget. |
onDisposing | A handler for the disposing event. |
onInitialized | A handler for the initialized event. Executed only once, after the widget is initialized. |
onOptionChanged | A handler for the optionChanged event. |
width | Specifies the width of the widget. |
Methods
This section describes members used to manipulate the widget.
Name | Description |
---|---|
element() | Returns the root HTML element of the widget. |
instance() | Returns an instance of this component class. |
off(eventName) | Detaches all event handlers from the specified event. |
off(eventName, eventHandler) | Detaches a particular event handler from the specified event. |
on(eventName, eventHandler) | Subscribes to a specified event. |
on(events) | Subscribes to the specified events. |
option() | Returns the configuration options of this component. |
option(optionName) | Gets the value of the specified configuration option of this component. |
option(optionName, optionValue) | Sets a value to the specified configuration option of this component. |
option(options) | Sets one or more options of this component. |
reset() | Resets the value and validation result of the editors that are included to the current validation group. |
validate() | Validates rules of the validators that belong to the current validation group. |
Events
This section describes events fired by this widget.
Name | Description |
---|---|
disposing | Fires when the widget is being removed. |
initialized | Raised only once, after the widget is initialized. |
optionChanged | Fires after an option of the component is changed. |
If you have technical questions, please create a support ticket in the DevExpress Support Center.
We appreciate your feedback.