JavaScript/jQuery ValidationSummary Options
An object defining configuration options for the widget.
See Also
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
elementAttr
Specifies the attributes to be attached to the widget's root element.
jQuery
$(function(){ $("#validationSummaryContainer").dxValidationSummary({ // ... elementAttr: { id: "elementId", class: "class-name" } }); });
Angular
<dx-validation-summary ... [elementAttr]="{ id: 'elementId', class: 'class-name' }"> </dx-validation-summary>
import { DxValidationSummaryModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxValidationSummaryModule ], // ... })
Vue
<template> <DxValidationSummary ... :element-attr="validationSummaryAttributes"> </DxValidationSummary> </template> <script> import DxValidationSummary from 'devextreme-vue/validation-summary'; export default { components: { DxValidationSummary }, data() { return { validationSummaryAttributes: { id: 'elementId', class: 'class-name' } } } } </script>
React
import React from 'react'; import ValidationSummary from 'devextreme-react/validation-summary'; class App extends React.Component { validationSummaryAttributes = { id: 'elementId', class: 'class-name' } render() { return ( <ValidationSummary ... elementAttr={this.validationSummaryAttributes}> </ValidationSummary> ); } } export default App;
hoverStateEnabled
Specifies whether the widget changes its state when a user pauses on it.
itemComponent
An alias for the itemTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.
items
An array of items displayed by the widget.
Generally, the array of items is auto-generated when a validation result is ready. And if you set a custom array of items, it will be overridden by the auto-generated array. So use this option to read the current array of items. Alternatively, you can set the array of items generated by a custom validation engine.
onContentReady
A function that is executed when the widget's content is ready and each time the content is changed.
Information about the event.
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
Model data. Available only when using Knockout. |
onDisposing
A function that is executed before the widget is disposed of.
Information about the event.
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
Model data. Available only if you use Knockout. |
onInitialized
A function used in JavaScript frameworks to save the widget instance.
Information about the event.
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
onItemClick
A function that is executed when a collection item is clicked or tapped.
Information about the event.
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. |
|
event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. |
itemData |
The clicked item's data. |
|
itemElement |
The item's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
itemIndex |
The clicked item's index. |
|
jQueryEvent |
Use 'event' instead. The jQuery event that caused the handler execution. Deprecated in favor of the event field. |
|
model |
Model data. Available only if you use Knockout. |
onOptionChanged
A function that is executed after a widget option is changed.
Information about the event.
Name | Type | Description |
---|---|---|
model |
Model data. Available only if you use Knockout. |
|
fullName |
The path to the modified option that includes all parent options. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The widget's instance. |
|
name |
The modified option if it belongs to the first level. Otherwise, the first-level option it is nested into. |
|
value | any |
The modified option's new value. |
validationGroup
Specifies the validation group for which summary should be generated.
In the Knockout approach, the ValidationSummary widget should be added to the div element representing the ValidationGroup component. In this instance, you do not have to specify the validationGroup option for the ValidationSummary widget.
If you use the JQuery approach, the validationGroup option should be specified for the ValidationSummary widget to generate a summary for a particular validation group. Assign the validation group name that is specified for the validationGroup option of the validators that extend the editors to be validated.
If you have technical questions, please create a support ticket in the DevExpress Support Center.