Skip to content

WIP: Publish ValidationCallbackData #32153

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mpreyskurantov wants to merge 9 commits into
base: 26_1
Choose a base branch
from
Open

WIP: Publish ValidationCallbackData #32153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
39429f3
d.ts (try with generics, keep tags type object vs any)
mpreyskurantov Jan 9, 2026
7c8d548
d.ts (try with generics, keep tags type object vs any): re-generate
mpreyskurantov Jan 9, 2026
7e1ee96
d.ts (try with generics, keep tags type object vs any): re-generate, …
mpreyskurantov Jan 9, 2026
62cba84
d.ts (try with generics, keep tags type object vs any): re-generate, vue
mpreyskurantov Jan 9, 2026
1f63a4e
demos: use generic data type for ts, keep js / jquery as is
mpreyskurantov Jan 11, 2026
97165c5
d.ts (no more generic): could not assign demos' event handler to wrap…
mpreyskurantov Jan 11, 2026
051200c
Merge remote-tracking branch 'origin(upstream)/26_1' into 26_1-32092-…
mpreyskurantov Jan 12, 2026
4ffb767
demos: Form/Validation
mpreyskurantov Jan 12, 2026
efa3bf1
reset
mpreyskurantov Jan 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion apps/demos/Demos/CardView/DataValidation/Angular/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { bootstrapApplication } from '@angular/platform-browser';
import { HttpClient, provideHttpClient, withFetch } from '@angular/common/http';
import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
import { DxCardViewModule, DxTextAreaModule } from 'devextreme-angular';
import type { ValidationCallbackData } from 'devextreme-angular/common';
import { lastValueFrom } from 'rxjs';
import { Employee, Service } from './app.service';

Expand Down Expand Up @@ -65,7 +66,7 @@ export class AppComponent {
return result;
};

hireDateValidationCallback = (params) => new Date(params.value) > new Date(params.data.birthDate);
hireDateValidationCallback = (params: ValidationCallbackData) => new Date(params.value) > new Date(params.data.birthDate);
}

bootstrapApplication(AppComponent, {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/CardView/DataValidation/Vue/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,8 +173,8 @@ import {
DxItem, DxSearchPanel, DxRequiredRule, DxEmailRule,
DxAsyncRule, DxCustomRule,
} from 'devextreme-vue/card-view';
import { type ValidationCallbackData } from 'devextreme-vue/common';
import 'devextreme-vue/text-area';
import type { ValidationCallbackData } from 'devextreme-vue/common';
import { employees, type Employee } from './data.ts';

function altExpr({ fullName }: Employee): string {
Expand Down
12 changes: 6 additions & 6 deletions apps/demos/Demos/Form/Validation/Angular/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@ import {
} from 'devextreme-angular';
import notify from 'devextreme/ui/notify';
import Validator from 'devextreme/ui/validator';
import { AsyncRule } from 'devextreme-angular/common';
import { DxFormModule, DxFormComponent, DxFormTypes } from 'devextreme-angular/ui/form';
import { DxTextBoxTypes } from 'devextreme-angular/ui/text-box';
import { DxDateBoxTypes } from 'devextreme-angular/ui/date-box';
import { DxDateRangeBoxTypes } from 'devextreme-angular/ui/date-range-box';
import { DxButtonModule, DxButtonTypes } from 'devextreme-angular/ui/button';
import type { ValidationCallbackData } from 'devextreme-angular/common';
import { Customer, Service } from './app.service';

type EditorOptions = DxTextBoxTypes.Properties;
Expand Down Expand Up @@ -190,8 +190,8 @@ export class AppComponent {
);
};

validateVacationDatesRange({ value }) {
const [startDate, endDate] = value;
validateVacationDatesRange(params: ValidationCallbackData) {
const [startDate, endDate] = params.value;

if (startDate === null || endDate === null) {
return true;
Expand All @@ -203,8 +203,8 @@ export class AppComponent {
return daysDifference < 25;
}

validateVacationDatesPresence({ value }) {
const [startDate, endDate] = value;
validateVacationDatesPresence(params: ValidationCallbackData) {
const [startDate, endDate] = params.value;

if (startDate === null && endDate === null) {
return true;
Expand All @@ -213,7 +213,7 @@ export class AppComponent {
return startDate !== null && endDate !== null;
}

asyncValidation: AsyncRule['validationCallback'] = ({ value }) => sendRequest(value);
asyncValidation = (params: ValidationCallbackData) => sendRequest(params.value);

onFormSubmit = (e: SubmitEvent) => {
notify({
Expand Down
12 changes: 6 additions & 6 deletions apps/demos/Demos/Form/Validation/React/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@ import Form, {
CustomRule,
} from 'devextreme-react/form';
import type { FormRef, FormTypes } from 'devextreme-react/form';
import type { ButtonType } from 'devextreme-react/common';
import type { IAutocompleteOptions } from 'devextreme-react/autocomplete';
import type { ISelectBoxOptions } from 'devextreme-react/select-box';
import type { ITextBoxOptions } from 'devextreme-react/text-box';
import type { IDateBoxOptions } from 'devextreme-react/date-box';
import type { IDateRangeBoxOptions } from 'devextreme-react/date-range-box';
import type { ButtonType, ValidationCallbackData } from 'devextreme-react/common';
import notify from 'devextreme/ui/notify';
import Validator from 'devextreme/ui/validator';
import 'devextreme-react/autocomplete';
Expand Down Expand Up @@ -100,10 +100,10 @@ const passwordComparison = (): string => customer.Password;

const checkComparison = (): boolean => true;

const asyncValidation = ({ value }: { value: any; }): Promise<unknown> => sendRequest(value);
const asyncValidation = (params: ValidationCallbackData): Promise<unknown> => sendRequest(params.value);

const validateVacationDatesRange = ({ value }: { value: any; }): boolean => {
const [startDate, endDate] = value;
const validateVacationDatesRange = (params: ValidationCallbackData): boolean => {
const [startDate, endDate] = params.value;

if (startDate === null || endDate === null) {
return true;
Expand All @@ -115,8 +115,8 @@ const validateVacationDatesRange = ({ value }: { value: any; }): boolean => {
return daysDifference < 25;
};

const validateVacationDatesPresence = ({ value }: { value: any }): boolean => {
const [startDate, endDate] = value;
const validateVacationDatesPresence = (params: ValidationCallbackData): boolean => {
const [startDate, endDate] = params.value;

if (startDate === null && endDate === null) {
return true;
Expand Down
10 changes: 5 additions & 5 deletions apps/demos/Demos/Form/Validation/ReactJs/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,18 +78,18 @@ function sendRequest(value) {
}
const passwordComparison = () => customer.Password;
const checkComparison = () => true;
const asyncValidation = ({ value }) => sendRequest(value);
const validateVacationDatesRange = ({ value }) => {
const [startDate, endDate] = value;
const asyncValidation = (params) => sendRequest(params.value);
const validateVacationDatesRange = (params) => {
const [startDate, endDate] = params.value;
if (startDate === null || endDate === null) {
return true;
}
const millisecondsPerDay = 24 * 60 * 60 * 1000;
const daysDifference = Math.abs((endDate - startDate) / millisecondsPerDay);
return daysDifference < 25;
};
const validateVacationDatesPresence = ({ value }) => {
const [startDate, endDate] = value;
const validateVacationDatesPresence = (params) => {
const [startDate, endDate] = params.value;
if (startDate === null && endDate === null) {
return true;
}
Expand Down
11 changes: 6 additions & 5 deletions apps/demos/Demos/Form/Validation/Vue/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,7 @@ import DxForm, {
} from 'devextreme-vue/form';
import DxAutocomplete from 'devextreme-vue/autocomplete'; // for editor-type=dxAutocomplete
import 'devextreme-vue/date-range-box';
import type { ValidationCallbackData } from 'devextreme-vue/common';
import notify from 'devextreme/ui/notify';
import Validator from 'devextreme/ui/validator';
import service from './data.ts';
Expand Down Expand Up @@ -312,11 +313,11 @@ function passwordComparison() {
function checkComparison() {
return true;
}
function asyncValidation(params: Record<string, any>) {
function asyncValidation(params: ValidationCallbackData) {
return sendRequest(params.value);
}
function validateVacationDatesRange({ value }: Record<string, any>) {
const [startDate, endDate] = value;
function validateVacationDatesRange(params: ValidationCallbackData) {
const [startDate, endDate] = params.value;

if (startDate === null || endDate === null) {
return true;
Expand All @@ -327,8 +328,8 @@ function validateVacationDatesRange({ value }: Record<string, any>) {

return daysDifference < 25;
}
function validateVacationDatesPresence({ value }: Record<string, any>) {
const [startDate, endDate] = value;
function validateVacationDatesPresence(params: ValidationCallbackData) {
const [startDate, endDate] = params.value;

if (startDate === null && endDate === null) {
return true;
Expand Down
8 changes: 4 additions & 4 deletions apps/demos/Demos/Form/Validation/jQuery/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,8 +145,8 @@ $(() => {
},
validationRules: [{
type: 'custom',
validationCallback: ({ value }) => {
const [startDate, endDate] = value;
validationCallback: (params) => {
const [startDate, endDate] = params.value;

if (startDate === null || endDate === null) {
return true;
Expand All @@ -160,8 +160,8 @@ $(() => {
message: 'The vacation period must not exceed 25 days',
}, {
type: 'custom',
validationCallback: ({ value }) => {
const [startDate, endDate] = value;
validationCallback: (params) => {
const [startDate, endDate] = params.value;

if (startDate === null && endDate === null) {
return true;
Expand Down
6 changes: 3 additions & 3 deletions packages/devextreme-angular/src/ui/card-view/nested/async-rule-dxi.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {



import { ValidationRuleType } from 'devextreme/common';
import { ValidationRuleType, ValidationCallbackData } from 'devextreme/common';

import {
DxIntegrationModule,
Expand Down Expand Up @@ -70,10 +70,10 @@ export class DxiCardViewAsyncRuleComponent extends CollectionNestedOption {
}

@Input()
get validationCallback(): ((options: { column: Record<string, any>, data: Record<string, any>, formItem: Record<string, any>, rule: Record<string, any>, validator: Record<string, any>, value: any }) => any) {
get validationCallback(): ((options: ValidationCallbackData) => any) {
return this._getOption('validationCallback');
}
set validationCallback(value: ((options: { column: Record<string, any>, data: Record<string, any>, formItem: Record<string, any>, rule: Record<string, any>, validator: Record<string, any>, value: any }) => any)) {
set validationCallback(value: ((options: ValidationCallbackData) => any)) {
this._setOption('validationCallback', value);
}

Expand Down
6 changes: 3 additions & 3 deletions packages/devextreme-angular/src/ui/card-view/nested/custom-rule-dxi.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {



import { ValidationRuleType } from 'devextreme/common';
import { ValidationRuleType, ValidationCallbackData } from 'devextreme/common';

import {
DxIntegrationModule,
Expand Down Expand Up @@ -70,10 +70,10 @@ export class DxiCardViewCustomRuleComponent extends CollectionNestedOption {
}

@Input()
get validationCallback(): ((options: { column: Record<string, any>, data: Record<string, any>, formItem: Record<string, any>, rule: Record<string, any>, validator: Record<string, any>, value: any }) => boolean) {
get validationCallback(): ((options: ValidationCallbackData) => boolean) {
return this._getOption('validationCallback');
}
set validationCallback(value: ((options: { column: Record<string, any>, data: Record<string, any>, formItem: Record<string, any>, rule: Record<string, any>, validator: Record<string, any>, value: any }) => boolean)) {
set validationCallback(value: ((options: ValidationCallbackData) => boolean)) {
this._setOption('validationCallback', value);
}

Expand Down
6 changes: 3 additions & 3 deletions packages/devextreme-angular/src/ui/card-view/nested/validation-rule-dxi.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {



import { ValidationRuleType, ComparisonOperator } from 'devextreme/common';
import { ValidationRuleType, ValidationCallbackData, ComparisonOperator } from 'devextreme/common';

import {
DxIntegrationModule,
Expand Down Expand Up @@ -94,10 +94,10 @@ export class DxiCardViewValidationRuleComponent extends CollectionNestedOption {
}

@Input()
get validationCallback(): ((options: { column: Record<string, any>, data: Record<string, any>, formItem: Record<string, any>, rule: Record<string, any>, validator: Record<string, any>, value: any }) => boolean) {
get validationCallback(): ((options: ValidationCallbackData) => boolean) {
return this._getOption('validationCallback');
}
set validationCallback(value: ((options: { column: Record<string, any>, data: Record<string, any>, formItem: Record<string, any>, rule: Record<string, any>, validator: Record<string, any>, value: any }) => boolean)) {
set validationCallback(value: ((options: ValidationCallbackData) => boolean)) {
this._setOption('validationCallback', value);
}

Expand Down
6 changes: 3 additions & 3 deletions packages/devextreme-angular/src/ui/data-grid/nested/async-rule-dxi.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {



import { ValidationRuleType } from 'devextreme/common';
import { ValidationRuleType, ValidationCallbackData } from 'devextreme/common';

import {
DxIntegrationModule,
Expand Down Expand Up @@ -70,10 +70,10 @@ export class DxiDataGridAsyncRuleComponent extends CollectionNestedOption {
}

@Input()
get validationCallback(): ((options: { column: Record<string, any>, data: Record<string, any>, formItem: Record<string, any>, rule: Record<string, any>, validator: Record<string, any>, value: any }) => any) {
get validationCallback(): ((options: ValidationCallbackData) => any) {
return this._getOption('validationCallback');
}
set validationCallback(value: ((options: { column: Record<string, any>, data: Record<string, any>, formItem: Record<string, any>, rule: Record<string, any>, validator: Record<string, any>, value: any }) => any)) {
set validationCallback(value: ((options: ValidationCallbackData) => any)) {
this._setOption('validationCallback', value);
}

Expand Down
6 changes: 3 additions & 3 deletions packages/devextreme-angular/src/ui/data-grid/nested/custom-rule-dxi.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {



import { ValidationRuleType } from 'devextreme/common';
import { ValidationRuleType, ValidationCallbackData } from 'devextreme/common';

import {
DxIntegrationModule,
Expand Down Expand Up @@ -70,10 +70,10 @@ export class DxiDataGridCustomRuleComponent extends CollectionNestedOption {
}

@Input()
get validationCallback(): ((options: { column: Record<string, any>, data: Record<string, any>, formItem: Record<string, any>, rule: Record<string, any>, validator: Record<string, any>, value: any }) => boolean) {
get validationCallback(): ((options: ValidationCallbackData) => boolean) {
return this._getOption('validationCallback');
}
set validationCallback(value: ((options: { column: Record<string, any>, data: Record<string, any>, formItem: Record<string, any>, rule: Record<string, any>, validator: Record<string, any>, value: any }) => boolean)) {
set validationCallback(value: ((options: ValidationCallbackData) => boolean)) {
this._setOption('validationCallback', value);
}

Expand Down
6 changes: 3 additions & 3 deletions packages/devextreme-angular/src/ui/data-grid/nested/validation-rule-dxi.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {



import { ValidationRuleType, ComparisonOperator } from 'devextreme/common';
import { ValidationRuleType, ValidationCallbackData, ComparisonOperator } from 'devextreme/common';

import {
DxIntegrationModule,
Expand Down Expand Up @@ -94,10 +94,10 @@ export class DxiDataGridValidationRuleComponent extends CollectionNestedOption {
}

@Input()
get validationCallback(): ((options: { column: Record<string, any>, data: Record<string, any>, formItem: Record<string, any>, rule: Record<string, any>, validator: Record<string, any>, value: any }) => boolean) {
get validationCallback(): ((options: ValidationCallbackData) => boolean) {
return this._getOption('validationCallback');
}
set validationCallback(value: ((options: { column: Record<string, any>, data: Record<string, any>, formItem: Record<string, any>, rule: Record<string, any>, validator: Record<string, any>, value: any }) => boolean)) {
set validationCallback(value: ((options: ValidationCallbackData) => boolean)) {
this._setOption('validationCallback', value);
}

Expand Down
6 changes: 3 additions & 3 deletions packages/devextreme-angular/src/ui/form/nested/async-rule-dxi.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {



import { ValidationRuleType } from 'devextreme/common';
import { ValidationRuleType, ValidationCallbackData } from 'devextreme/common';

import {
DxIntegrationModule,
Expand Down Expand Up @@ -70,10 +70,10 @@ export class DxiFormAsyncRuleComponent extends CollectionNestedOption {
}

@Input()
get validationCallback(): ((options: { column: Record<string, any>, data: Record<string, any>, formItem: Record<string, any>, rule: Record<string, any>, validator: Record<string, any>, value: any }) => any) {
get validationCallback(): ((options: ValidationCallbackData) => any) {
return this._getOption('validationCallback');
}
set validationCallback(value: ((options: { column: Record<string, any>, data: Record<string, any>, formItem: Record<string, any>, rule: Record<string, any>, validator: Record<string, any>, value: any }) => any)) {
set validationCallback(value: ((options: ValidationCallbackData) => any)) {
this._setOption('validationCallback', value);
}

Expand Down
6 changes: 3 additions & 3 deletions packages/devextreme-angular/src/ui/form/nested/custom-rule-dxi.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {



import { ValidationRuleType } from 'devextreme/common';
import { ValidationRuleType, ValidationCallbackData } from 'devextreme/common';

import {
DxIntegrationModule,
Expand Down Expand Up @@ -70,10 +70,10 @@ export class DxiFormCustomRuleComponent extends CollectionNestedOption {
}

@Input()
get validationCallback(): ((options: { column: Record<string, any>, data: Record<string, any>, formItem: Record<string, any>, rule: Record<string, any>, validator: Record<string, any>, value: any }) => boolean) {
get validationCallback(): ((options: ValidationCallbackData) => boolean) {
return this._getOption('validationCallback');
}
set validationCallback(value: ((options: { column: Record<string, any>, data: Record<string, any>, formItem: Record<string, any>, rule: Record<string, any>, validator: Record<string, any>, value: any }) => boolean)) {
set validationCallback(value: ((options: ValidationCallbackData) => boolean)) {
this._setOption('validationCallback', value);
}

Expand Down
6 changes: 3 additions & 3 deletions packages/devextreme-angular/src/ui/form/nested/validation-rule-dxi.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {



import { ValidationRuleType, ComparisonOperator } from 'devextreme/common';
import { ValidationRuleType, ValidationCallbackData, ComparisonOperator } from 'devextreme/common';

import {
DxIntegrationModule,
Expand Down Expand Up @@ -94,10 +94,10 @@ export class DxiFormValidationRuleComponent extends CollectionNestedOption {
}

@Input()
get validationCallback(): ((options: { column: Record<string, any>, data: Record<string, any>, formItem: Record<string, any>, rule: Record<string, any>, validator: Record<string, any>, value: any }) => boolean) {
get validationCallback(): ((options: ValidationCallbackData) => boolean) {
return this._getOption('validationCallback');
}
set validationCallback(value: ((options: { column: Record<string, any>, data: Record<string, any>, formItem: Record<string, any>, rule: Record<string, any>, validator: Record<string, any>, value: any }) => boolean)) {
set validationCallback(value: ((options: ValidationCallbackData) => boolean)) {
this._setOption('validationCallback', value);
}

Expand Down
Loading
Loading