DataForm layout validation

[oandregal]

Related: #71500

What

The Field API supports basic required and custom validation in all controls. This is displayed to users when they interact with the regular DataForm layout, as in the example:

Screen.Recording.2025-10-14.at.14.16.24.mov

However, other layouts such as panel or card don't display any. For example:

Screen.Recording.2025-10-14.at.14.17.12.mov

Status

We need to consider how to surface validation in all layouts.

• Regular: ok. The components display the errors.
• Row: not necessary.
• Panel: unimplemented.
  • Should/How to display the error in the summary field?
  • Can the dropdown/modal close when there are errors?
• Card: unimplemented.
  • When the card is closed, do we display any validation as summary?

[jameskoster]

Can the dropdown/modal close when there are errors?

Ideally I think not. Users shouldn't be able to 'apply' invalid values. Similarly with the card, perhaps it shouldn't be possible to collapse cards that contain errors.

But I suppose we need to account for forms that include invalid fields by default (e.g. an "I agree to terms" checkbox).

A simple option could be to do something with the label, like appending with an error icon that shows the validation message in a tooltip:

[jameskoster]

Replying to myself...

Users shouldn't be able to 'apply' invalid values. [...] (e.g. an "I agree to terms" checkbox)

On reflection maybe it should be okay to apply invalid values. Otherwise users wouldn't be able to not "agree to terms" after opening the popover/modal which seems quite invasive.

I guess the first step here is to handle the presentation of errors when the field isn't visible (panel layout). For card layout, disabling collapsing when the card contains invalid fields still seems okay to me.

[senadir]

But I suppose we need to account for forms that include invalid fields by default (e.g. an "I agree to terms" checkbox).

Can be handled by tracking if the form was touched or not

[poligilad-auto]

Panel: unimplemented.
Should/How to display the error in the summary field?
Can the dropdown/modal close when there are errors?

This might be a silly question, but why not just prevent invalid input altogether? That’s what we’re doing for the refund form in Woo, for example (the amount has to be valid, not less than $0, and not more than $max).

[jameskoster]

@poligilad-auto a field can be invalid by default. For example a required "I agree to the terms and conditions" checkbox that is false by default. If we don't highlight the field as invalid then how does the user know they have to check it? They'd have to open each panel one at a time to see which one is invalid.

@senadir are you suggesting that we only highlight fields that are invalid after the user interacts with them? If the user submits a form with invalid values (that they didn't interact with) then we'd still need to indicate which one(s) are invalid somehow, no?

[senadir]

Validation need to run at some point, if you land at a form with invalid fields, be it empty required fields, or unchecked required checkboxes, you exit the form in 2 ways:

• Collapse a panel form.
• Hit esc, click cancel, or hit X on a modal form.

The behavior here would depend really on what form you're dealing with:

Panel

For a panel, you can prevent collapsing if you have visible errors (check/unchecked checkbox, touched required input).
Errors would also be visible after hitting a save or persist button.

Modal

For Modal, exiting without save (esc, cancel)... shouldn't be blocked in my opinion.
Persisting the modal (via Apply) should make all errors visible and run validation, and prevent it from exit if so.

[senadir]

At least how we handled it on WooCommerce's checkout is that all fields (required) would mount with errors, but hidden, only after interaction or placing a form would an error become visible

[poligilad-auto]

The behavior here would depend really on what form you're dealing with:

Very true. The checkout example is a great one. You show invalid fields after clicking the “Buy” button or mark fields as required, but you wouldn’t show invalid states for a form that hasn’t been interacted with yet.

It’s a bit hard to fully generalize the behavior, but the main point is that we need invalid states for inputs and then decide on some logic for how those states should work.

Panel: unimplemented.
Should/How to display the error in the summary field?
Can the dropdown/modal close when there are errors?

For the DataForm panel view, I’d recommend showing validation when opening the popover or modal to edit the input and not allowing to enter invalid input. That’ll help avoid having too many invalid summary field states.

[jameskoster]

My only concern with that approach is that it can lead to situations where the user can't submit a form because some inputs are invalid, but there's no way for them to tell which fields are invalid.

In the mockup below the submit button is disabled because the user didn't agree to terms (a required field), but the user has no way to understand which field is invalid—they need to open each one manually to check, which doesn't seem like a great UX. This might be a dumb example, but I think it illustrates my point...