Skip to content

Enhance ValidatedInputControl to delay email validation until blur - #79518

Open
NoumaanAhamed wants to merge 1 commit into
WordPress:trunkfrom
NoumaanAhamed:fix/email-validation-blur
Open

NoumaanAhamed wants to merge 1 commit into
WordPress:trunkfrom
NoumaanAhamed:fix/email-validation-blur

Conversation

@NoumaanAhamed

Copy link
Copy Markdown

What?

Closes #79515

This PR adds a revalidateOn prop to ValidatedInputControl and defaults it to 'blur' for email input types, preventing noisy validation errors from displaying while the user is actively typing.

Why?

Currently, validated email fields display error messages (e.g., "Please include an @ in the email address") continuously while a user is typing a new email address. This creates a noisy and premature validation UX because partial email addresses are expected to be invalid while being typed.

Aligning with form design best practices (NNG, Baymard, GOV.UK), this change ensures we don't present inline validation errors before the user has finished entering their information.

How?

  1. Added a revalidateOn?: 'change' | 'blur' property to ValidatedControlProps and surfaced it through ValidatedInputControl and DataViews' ValidatedText.
  2. In ValidatedInputControl, the revalidateOn property defaults to 'blur' if the field type === 'email'.
  3. In ControlWithError, we intercept the child component's onChange event via cloneElement to temporarily hide existing validation error messages and unset the isTouched state whenever revalidateOn is 'blur' and the user interacts with the input. The existing onBlur behavior correctly handles the re-validation once focus is lost. Intercepting onChange within React prevents synthetic event batching issues that happen if we use native addEventListener('input').

Testing Instructions

  1. Run npm run storybook:dev.
  2. Open Components / Selection & Input / Validated Form Controls / ValidatedInputControl.
  3. Set the type control to email.
  4. Make sure required is enabled.
  5. Focus the empty field, then blur it to see the initial validation error.
  6. Focus the field again and start typing an email address.
  7. Verify that the validation error hides immediately when you begin typing.
  8. Verify that it checks validity again and presents the proper error state once you blur the field.

Testing Instructions for Keyboard

  1. Navigate to the Storybook field using the Tab key.
  2. Tab away while empty to trigger the error.
  3. Shift + Tab back into the field and type a letter. The error should visually clear and announce correctly based on standard Aria live region behaviors.
  4. Tab away with an invalid partial email and confirm the error message returns.

Use of AI Tools

This PR was authored with the assistance of an Gemini 3.1 Pro using Google Antigravity. It was used to find the relevant files and ensure nothing else breaks.

@github-actions

Copy link
Copy Markdown

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Required label: Any label starting with [Type].
  • Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

@github-actions

github-actions Bot commented Jun 25, 2026 •

Copy link
Copy Markdown

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: NoumaanAhamed <mohamedahamed@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: bluefuton <bluefuton@git.wordpress.org>

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

@github-actions github-actions Bot added [Package] Components /packages/components [Package] DataViews /packages/dataviews First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository labels Jun 25, 2026
@github-actions

Copy link
Copy Markdown

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @NoumaanAhamed! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@mirka

mirka commented Jun 25, 2026

Copy link
Copy Markdown
Member

We are currently waiting for a design decision in the original issue.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository [Package] Components /packages/components [Package] DataViews /packages/dataviews

Projects

None yet

Development

Successfully merging this pull request may close these issues.

ValidatedInputControl: email fields should not show validation errors while typing

2 participants