ValidationSummary

A widget for displaying the result of checking validation rules for editors.

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

This widget has a collection of items that present the validation errors that currently exist in a validation group or the ViewModel to which the widget is related.

dxValidationSummary Widget

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

  • jQuery
    Use the dxValidationSummary jQuery plug-in.

    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: []
        });
    $("#textBox2").dxTextBox({})
        .dxValidator({
            validationRules: []
        });
    $("#summary").dxValidationSummary({ });
    $("#button").dxButton({});
  • Knockout
    Add a div element and apply the dxValidationSummary binding to this element.

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

    HTML
    <div 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

The summary items are displayed using the default item template that is based on the message field of the broken validation rule. However, you can use a custom item template.

See Also
NOTE
The currently existing validation errors are not only the errors that are discovered during the current validation, but also the validation errors that are discovered during the earlier validations if the not-valid values are not changed since then.
See Also

Configuration

An object defining configuration options for the widget.

Name Description
hoverStateEnabled

A Boolean value specifying whether or not the widget changes its state when being hovered by an end user.

items

An array of items displayed by the widget.

itemTemplate

The template to be used for rendering items.

onContentReady

A handler for the contentReady event.

onDisposing

A handler for the disposing event.

onInitialized

A handler for the initialized event.

onItemClick

A handler for the itemClick event.

onOptionChanged

A handler for the optionChanged event.

validationGroup

Specifies the validation group for which summary should be generated.

Methods

This section describes members used to manipulate the widget.

Name Description
beginUpdate()

Prevents the component from refreshing until the endUpdate method is called.

defaultOptions(rule)

Specifies the device-dependent default configuration options for this component.

element()

Returns the root HTML element of the widget.

endUpdate()

Enables the component to refresh after the beginUpdate method call.

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.

repaint()

Redraws the widget.

Events

This section describes events exposed by this widget.

Name Description
contentReady

Fires when widget content is ready.

disposing

Fires when the widget is being removed.

initialized

Fires when the widget is initialized.

itemClick

Fires when a widget item is clicked.

optionChanged

Fires after an option of the component is changed.