Dataforms: Add pattern validation.

[jorgefilipecosta]

Part of: #71500

This PR adds pattern based validation to all the fields that support it.

Some questions

When pattern validation fails the message is always: "Please match the requested format". Should we allows customizing this error message on the API?

Pattern on the api is pattern?: string | RegExp;. I think being able to provide a regex is nice, but in html it is always strings should we allow regex or force the consumer to pass a string?

cc: @oandregal

Testing Instructions

Execute npm run storybook:dev
Go to http://localhost:50240/?path=/story/dataviews-dataform--validation.
Verify the fields with pattern validation work as expected.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: mcsf <mcsf@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[oandregal]

When pattern validation fails the message is always: "Please match the requested format". Should we allows customizing this error message on the API?

Nah, it's good to start with opinionated messages. When/If we do this, any other existing rule also need it, so we may want to look at this separately.

[oandregal]

Right now, the storybook contains a single example per control type, and the storybook controls allow testing them individually (or in combination). Could you 1) expose pattern as a storybook control and 2) update the existing controls that pattern (text, number, email, pattern, password) instead of creating new ones?

[oandregal]

In addition to per-control validation, the useFormValidity hook must return the same error in the validity prop and isValid false. This is demonstrated in the storybook by controlling the "save button" (it's disabled if the form is invalid).

[oandregal]

Pattern on the api is pattern?: string | RegExp;. I think being able to provide a regex is nice, but in html it is always strings should we allow regex or force the consumer to pass a string?

We need strings for the fields to be serializable. Supporting Regexp objects is nice, I agree. It's fine by me to support both from the outset, and I don't see any issues. Though, I also wonder if they add anything really worth having that strings don't have (considering the serialization concerns). I'm going to summon @mcsf intuition about this.

[mcsf]

We need strings for the fields to be serializable. Supporting Regexp objects is nice, I agree. It's fine by me to support both from the outset, and I don't see any issues. Though, I also wonder if they add anything really worth having that strings don't have (considering the serialization concerns). I'm going to summon @mcsf intuition about this.

This is not a strong opinion, but just offhand I can think of the fact that RegExp instances can carry flags, which are lost when extracting .source.

/^hello?$/i.source                        // "^hello?$"
/^hello?$/i.source === /^hello?$/g.source // true

Which sounds like a point of confusion that we can avoid by only accepting strings.

[jorgefilipecosta]

We need strings for the fields to be serializable. Supporting Regexp objects is nice, I agree. It's fine by me to support both from the outset, and I don't see any issues. Though, I also wonder if they add anything really worth having that strings don't have (considering the serialization concerns). I'm going to summon @mcsf intuition about this.

This is not a strong opinion, but just offhand I can think of the fact that RegExp instances can carry flags, which are lost when extracting .source.

/^hello?$/i.source                        // "^hello?$"
/^hello?$/i.source === /^hello?$/g.source // true

Which sounds like a point of confusion that we can avoid by only accepting strings.

Good point @mcsf, I removed the RegExp possibility.

[jorgefilipecosta]

Hi @oandregal, I applied your feedback and now on the storybook there is a control to enable pattern validation, the custom one should be set to none as together is hard to test.

[github-actions]

Flaky tests detected in aa0d102.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/19508045220
📝 Reported issues:

• [Flaky Test] User Mention: should insert two subsequent mentions #48569 in /test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js

[oandregal]

Nice!

[jorgefilipecosta]

Thank you for the reviews @oandregal all the feedback was applied before the merge.