JavaScript/jQuery ValidationSummary Options
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;itemComponent
An alias for the itemTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.
items
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.
| 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.
| 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
| 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
| 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
| 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
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.