Skip to content

DataViews: Add min/max validation support to DataForm inputs #73465

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
jorgefilipecosta merged 9 commits into from
Nov 27, 2025
Merged

DataViews: Add min/max validation support to DataForm inputs #73465

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
14b38c5
Dataforms: Add min max validation to fields that support it.
jorgefilipecosta Nov 20, 2025
91d3fac
Add min test to email and url
jorgefilipecosta Nov 20, 2025
6ee73ed
solve merge conflicts
jorgefilipecosta Nov 21, 2025
aa4b978
Enhaced story examples
jorgefilipecosta Nov 21, 2025
6c38ab8
Add changelog entries
jorgefilipecosta Nov 21, 2025
6c18ff8
Update packages/dataviews/CHANGELOG.md
jorgefilipecosta Nov 26, 2025
8dd196f
Update useFormValidity
jorgefilipecosta Nov 26, 2025
a2fd0c0
added unit tests
jorgefilipecosta Nov 26, 2025
565c451
update changelog changes
jorgefilipecosta Nov 26, 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
4 changes: 4 additions & 0 deletions packages/dataviews/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

## Unreleased

### Enhancements

- DataForm: add support for `min`/`max` and `minLength`/`maxLength` validation for relevant controls. [#73465](https://github.com/WordPress/gutenberg/pull/73465)

## 11.0.0 (2025-11-26)

### Enhancements
Expand Down
2 changes: 2 additions & 0 deletions packages/dataviews/src/dataform-controls/textarea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@ export default function Textarea< Item >( {
help={ description }
onChange={ onChangeControl }
rows={ rows }
minLength={ isValid?.minLength }
maxLength={ isValid?.maxLength }
__next40pxDefaultSize
__nextHasNoMarginBottom
hideLabelFromVision={ hideLabelFromVision }
Expand Down
2 changes: 2 additions & 0 deletions packages/dataviews/src/dataform-controls/utils/validated-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,8 @@ export default function ValidatedText< Item >( {
prefix={ prefix }
suffix={ suffix }
pattern={ isValid?.pattern }
minLength={ isValid?.minLength }
maxLength={ isValid?.maxLength }
__next40pxDefaultSize
/>
);
Expand Down
2 changes: 2 additions & 0 deletions packages/dataviews/src/dataform-controls/utils/validated-number.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,8 @@ export default function ValidatedNumber< Item >( {
__next40pxDefaultSize
hideLabelFromVision={ hideLabelFromVision }
step={ step }
min={ isValid?.min }
max={ isValid?.max }
/>
);
}
86 changes: 86 additions & 0 deletions packages/dataviews/src/hooks/use-form-validity.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -482,6 +482,92 @@ function validateFormField< Item >(
}
}

// Validate the field: isValid.min
if (
!! formField.field &&
formField.field.isValid.min !== undefined &&
( formField.field.type === 'integer' ||
formField.field.type === 'number' )
) {
const value = formField.field.getValue( { item } );
if ( ! isEmptyNullOrUndefined( value ) ) {
if ( Number( value ) < formField.field.isValid.min ) {
return {
min: {
type: 'invalid',
message: __( 'Value is below the minimum.' ),
},
};
}
}
}

// Validate the field: isValid.max
if (
!! formField.field &&
formField.field.isValid.max !== undefined &&
( formField.field.type === 'integer' ||
formField.field.type === 'number' )
) {
const value = formField.field.getValue( { item } );
if ( ! isEmptyNullOrUndefined( value ) ) {
if ( Number( value ) > formField.field.isValid.max ) {
return {
max: {
type: 'invalid',
message: __( 'Value is above the maximum.' ),
},
};
}
}
}

// Validate the field: isValid.minLength
if (
!! formField.field &&
formField.field.isValid.minLength !== undefined &&
( formField.field.type === 'text' ||
formField.field.type === 'email' ||
formField.field.type === 'url' ||
formField.field.type === 'telephone' ||
formField.field.type === 'password' )
Comment on lines +529 to +533
Copy link
Member

@oandregal oandregal Nov 27, 2025

Choose a reason for hiding this comment

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

I'm going to refactor this soon so that it's the field type that runs the validation (related).

Copy link
Member

@oandregal oandregal Nov 28, 2025

Choose a reason for hiding this comment

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

Here's the PR to move the validation logic to the field type #73642

) {
const value = formField.field.getValue( { item } );
if ( ! isEmptyNullOrUndefined( value ) ) {
if ( String( value ).length < formField.field.isValid.minLength ) {
return {
minLength: {
type: 'invalid',
message: __( 'Value is too short.' ),
},
};
}
}
}

// Validate the field: isValid.maxLength
if (
!! formField.field &&
formField.field.isValid.maxLength !== undefined &&
( formField.field.type === 'text' ||
formField.field.type === 'email' ||
formField.field.type === 'url' ||
formField.field.type === 'telephone' ||
formField.field.type === 'password' )
) {
const value = formField.field.getValue( { item } );
if ( ! isEmptyNullOrUndefined( value ) ) {
if ( String( value ).length > formField.field.isValid.maxLength ) {
return {
maxLength: {
type: 'invalid',
message: __( 'Value is too long.' ),
},
};
}
}
}

// Validate the field: isValid.elements (static)
if (
!! formField.field &&
Expand Down
Loading
Loading