Skip to content

Add support for elements validation in DataForm's array fields #71194

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

Merged
merged 38 commits into from
Sep 23, 2025
Merged

Add support for elements validation in DataForm's array fields #71194

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
000595e
Add support for validating elements
elazzabi Aug 13, 2025
cf015c5
Add validation input and how to
elazzabi Aug 13, 2025
14e0308
Add array validation with required param
elazzabi Aug 15, 2025
59ade44
Update validation logic to check if the token matches any available e…
elazzabi Aug 15, 2025
1db0a20
Enhance validation logic to support array types by ensuring all value…
elazzabi Aug 15, 2025
b7b321a
Add tests for array and text field validations and validating against…
elazzabi Aug 15, 2025
81d355f
Add categories field to DataFormValidationComponent with validation r…
elazzabi Aug 18, 2025
b3b0c28
Add ValidatedFormTokenControl component to enhance array input valida…
elazzabi Aug 22, 2025
382cb4c
Enhance array validation logic to ensure elements are only checked if…
elazzabi Aug 22, 2025
203af53
Refactor array control to support internationalization and improve va…
elazzabi Aug 22, 2025
a65e3b0
Add countries field to DataFormValidationComponent with validation ru…
elazzabi Aug 22, 2025
538fc3a
Merge branch 'trunk' into add/elements-validation
elazzabi Sep 10, 2025
8d5d551
Expose ValidatedFormTokenField from private API
elazzabi Sep 10, 2025
0559f4c
Remove customValidation
elazzabi Sep 10, 2025
b3b0024
Import ValidatedFormTokenField and use it in Array
elazzabi Sep 10, 2025
fc42406
Add displayTransform and __experimentalRenderItem
elazzabi Sep 11, 2025
6d527cd
Replace arrays for display const and remove unused findElementByValue
elazzabi Sep 11, 2025
3f625d8
Adapt suggestions to pass values
elazzabi Sep 11, 2025
53c83fd
Add customValidity and onFocus
elazzabi Sep 11, 2025
822e31c
Add validation with validateTokens
elazzabi Sep 11, 2025
d24449b
Rename function
elazzabi Sep 11, 2025
6617584
Add changelogs
elazzabi Sep 11, 2025
75a0a5f
Change changelog for components
elazzabi Sep 11, 2025
fe03b3d
Call onInputChange after reseting the input
elazzabi Sep 11, 2025
6ef2a57
Pass an onInputChange instead of onFocus
elazzabi Sep 11, 2025
1a94d66
Merge branch 'add/elements-validation' of https://github.com/elazzabi…
elazzabi Sep 11, 2025
f2e301d
Remove validation for elements as it is replaced by control-level val…
elazzabi Sep 11, 2025
27536bc
Add documentation for elements
elazzabi Sep 11, 2025
bc66855
Merge branch 'trunk' into add/elements-validation
elazzabi Sep 18, 2025
300841d
Add changes to use the new getValue/setValue API
elazzabi Sep 18, 2025
08f9b87
Remove validateToken from onChange
elazzabi Sep 18, 2025
a9872b2
Remove customInvalidMessage and messages
elazzabi Sep 18, 2025
32b0d52
Fix linting
elazzabi Sep 18, 2025
5ed466c
Moves changelog entries to Unreleased
elazzabi Sep 18, 2025
20410e4
Remove input logic
oandregal Sep 19, 2025
87c94f6
Update message by including tokens
elazzabi Sep 19, 2025
a4b1a3a
Merge branch 'trunk' into add/elements-validation
elazzabi Sep 23, 2025
ce7465f
Change order of changelog to reflect the timeline
elazzabi Sep 23, 2025
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
10 changes: 10 additions & 0 deletions packages/dataviews/src/dataform-controls/array.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,9 +77,19 @@ export default function ArrayControl< Item >( {
suggestions={
elements?.map( ( suggestion ) => suggestion.label ) ?? []
}
__experimentalValidateInput={ ( token ) => {
if ( ! field.isValid.elements ) {
return true;
}

// Check if the token matches any of the available elements
const tokenByLabel = findElementByLabel( token );
return !! tokenByLabel;
} }
__experimentalExpandOnFocus={ elements && elements.length > 0 }
__next40pxDefaultSize
__nextHasNoMarginBottom
__experimentalShowHowTo={ ! field.isValid.elements }
/>
);
}
192 changes: 192 additions & 0 deletions packages/dataviews/src/test/validation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,4 +117,196 @@ describe( 'validation', () => {
const result = isItemValid( item, fields, form );
expect( result ).toBe( true );
} );

it( 'array field is invalid when required but empty', () => {
const item = { id: 1, tags: [] };
const fields: Field< {} >[] = [
{
id: 'tags',
type: 'array',
isValid: {
required: true,
},
},
];
const form = { fields: [ 'tags' ] };
const result = isItemValid( item, fields, form );
expect( result ).toBe( false );
} );

it( 'array field is invalid when required but not an array', () => {
const item = { id: 1, tags: null };
const fields: Field< {} >[] = [
{
id: 'tags',
type: 'array',
isValid: {
required: true,
},
},
];
const form = { fields: [ 'tags' ] };
const result = isItemValid( item, fields, form );
expect( result ).toBe( false );
} );

it( 'array field is valid when required and has values', () => {
const item = { id: 1, tags: [ 'tag1', 'tag2' ] };
const fields: Field< {} >[] = [
{
id: 'tags',
type: 'array',
isValid: {
required: true,
},
},
];
const form = { fields: [ 'tags' ] };
const result = isItemValid( item, fields, form );
expect( result ).toBe( true );
} );

it( 'text field with isValid.elements validates against elements', () => {
const item = { id: 1, status: 'published' };
const fields: Field< {} >[] = [
{
id: 'status',
type: 'text',
elements: [
{ value: 'draft', label: 'Draft' },
{ value: 'published', label: 'Published' },
],
isValid: {
elements: true,
},
},
];
const form = { fields: [ 'status' ] };
const result = isItemValid( item, fields, form );
expect( result ).toBe( true );
} );

it( 'text field with isValid.elements rejects invalid values', () => {
const item = { id: 1, status: 'invalid-status' };
const fields: Field< {} >[] = [
{
id: 'status',
type: 'text',
elements: [
{ value: 'draft', label: 'Draft' },
{ value: 'published', label: 'Published' },
],
isValid: {
elements: true,
},
},
];
const form = { fields: [ 'status' ] };
const result = isItemValid( item, fields, form );
expect( result ).toBe( false );
} );

it( 'integer field with isValid.elements validates against elements', () => {
const item = { id: 1, priority: 2 };
const fields: Field< {} >[] = [
{
id: 'priority',
type: 'integer',
elements: [
{ value: 1, label: 'Low' },
{ value: 2, label: 'Medium' },
{ value: 3, label: 'High' },
],
isValid: {
elements: true,
},
},
];
const form = { fields: [ 'priority' ] };
const result = isItemValid( item, fields, form );
expect( result ).toBe( true );
} );

it( 'integer field with isValid.elements rejects invalid values', () => {
const item = { id: 1, priority: 5 };
const fields: Field< {} >[] = [
{
id: 'priority',
type: 'integer',
elements: [
{ value: 1, label: 'Low' },
{ value: 2, label: 'Medium' },
{ value: 3, label: 'High' },
],
isValid: {
elements: true,
},
},
];
const form = { fields: [ 'priority' ] };
const result = isItemValid( item, fields, form );
expect( result ).toBe( false );
} );

it( 'array field with isValid.elements validates all items against elements', () => {
const item = { id: 1, tags: [ 'red', 'blue' ] };
const fields: Field< {} >[] = [
{
id: 'tags',
type: 'array',
elements: [
{ value: 'red', label: 'Red' },
{ value: 'blue', label: 'Blue' },
{ value: 'green', label: 'Green' },
],
isValid: {
elements: true,
},
},
];
const form = { fields: [ 'tags' ] };
const result = isItemValid( item, fields, form );
expect( result ).toBe( true );
} );

it( 'array field with isValid.elements rejects arrays with invalid items', () => {
const item = { id: 1, tags: [ 'red', 'yellow' ] };
const fields: Field< {} >[] = [
{
id: 'tags',
type: 'array',
elements: [
{ value: 'red', label: 'Red' },
{ value: 'blue', label: 'Blue' },
{ value: 'green', label: 'Green' },
],
isValid: {
elements: true,
},
},
];
const form = { fields: [ 'tags' ] };
const result = isItemValid( item, fields, form );
expect( result ).toBe( false );
} );

it( 'array field with isValid.elements handles non-array values', () => {
const item = { id: 1, tags: 'not-an-array' };
const fields: Field< {} >[] = [
{
id: 'tags',
type: 'array',
elements: [
{ value: 'red', label: 'Red' },
{ value: 'blue', label: 'Blue' },
],
isValid: {
elements: true,
},
},
];
const form = { fields: [ 'tags' ] };
const result = isItemValid( item, fields, form );
expect( result ).toBe( false );
} );
} );
1 change: 1 addition & 0 deletions packages/dataviews/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,7 @@ export type FieldTypeDefinition< Item > = {

export type Rules< Item > = {
required?: boolean;
elements?: boolean;
custom?: ( item: Item, field: NormalizedField< Item > ) => null | string;
};

Expand Down
30 changes: 30 additions & 0 deletions packages/dataviews/src/validation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,14 @@ export function isItemValid< Item >(
const isEmptyNullOrUndefined = ( value: any ) =>
[ undefined, '', null ].includes( value );

const isNotArrayEmptyOrContainsInvalidElements = ( value: any ) => {
return (
! Array.isArray( value ) ||
value.length === 0 ||
value.every( ( element: any ) => isEmptyNullOrUndefined( element ) )
);
};

return _fields.every( ( field ) => {
const value = field.getValue( { item } );

Expand All @@ -34,6 +42,8 @@ export function isItemValid< Item >(
( field.type === 'email' && isEmptyNullOrUndefined( value ) ) ||
( field.type === 'integer' &&
isEmptyNullOrUndefined( value ) ) ||
( field.type === 'array' &&
isNotArrayEmptyOrContainsInvalidElements( value ) ) ||
Copy link
Member

@oandregal oandregal Aug 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a small nit. For a second, I was confused for the use of "invalid elements" here, I thought why are we validating isValid.elements here if there's a specific check for it? Perhaps something along these lines makes that more clear?

Suggested change
isNotArrayEmptyOrContainsInvalidElements( value ) ) ||
isArrayOrElementsEmptyNullOrUndefined( value ) ) ||

( field.type === undefined && isEmptyNullOrUndefined( value ) )
) {
return false;
Expand All @@ -44,6 +54,26 @@ export function isItemValid< Item >(
}
}

if ( field.isValid.elements ) {
if ( field.elements ) {
const validValues = field.elements.map(
( element ) => element.value
);

if ( field.type === 'array' ) {
// For arrays, check if all values are valid elements
if ( Array.isArray( value ) ) {
return value.every( ( arrayItem ) =>
validValues.includes( arrayItem )
);
}
return false;
}
// For single-value fields, check if the value is a valid element
return validValues.includes( value );
Copy link
Member

@oandregal oandregal Aug 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In addition to this, we need to display what's happening to the user.

Take the text control as an example. We handle isValid.required and isValid.custom there. By introducing isValid.elements we need to communicate that as well (we could use the customValidator function of the control to display something along the lines of "Value must be one of the elements".

Copy link
Contributor Author

@elazzabi elazzabi Sep 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added an error when this happens
CleanShot 2025-09-11 at 09 30 27@2x

}
}

if (
typeof field.isValid.custom === 'function' &&
field.isValid.custom( item, field ) !== null
Expand Down
Loading