Skip to content

fix: defer email validation to after first blur on signup form#27765

Merged
dhairyashiil merged 4 commits intocalcom:mainfrom
AhmadYasser1:fix/signup-email-validation-on-touched
Feb 9, 2026
Merged

fix: defer email validation to after first blur on signup form#27765
dhairyashiil merged 4 commits intocalcom:mainfrom
AhmadYasser1:fix/signup-email-validation-on-touched

Conversation

@AhmadYasser1
Copy link
Copy Markdown
Contributor

Summary

  • Prevents "Invalid email" from showing immediately on every keystroke during signup
  • Validation now only triggers after the user has interacted with a field and moved focus away

Changes

  • apps/web/modules/signup-view.tsx: Change react-hook-form validation mode from "onChange" to "onTouched"

Root Cause

With mode: "onChange", react-hook-form runs the Zod schema validation on every keystroke. This causes the email field to show "Invalid email" as soon as the user types a single character, even though they haven't finished entering their email. This is a poor UX experience that makes the form feel aggressive.

Fix

Switch to mode: "onTouched" which:

  • Only runs validation after the field has been "touched" (blurred at least once)
  • After first blur, validates on every subsequent change (so real-time feedback still works for password strength hints)
  • Doesn't show errors during initial typing

Test plan

  • Type email slowly — no "Invalid email" error appears during typing
  • Tab away from incomplete email field — error appears
  • Fix the email and continue — error clears in real-time
  • Password strength hints still update in real-time after interacting with the field
  • Form submission still validates all fields
  • Biome lint passes — no new warnings

Fixes #19163

Change react-hook-form validation mode from "onChange" to "onTouched"
so that the "Invalid email" error only appears after the user has
interacted with the field and moved away, not on every keystroke.
Password strength hints still update in real-time since onTouched
validates on change after the field has been touched (blurred once).

Fixes calcom#19163
@github-actions github-actions bot added Low priority Created by Linear-GitHub Sync ui area: UI, frontend, button, form, input 🐛 bug Something isn't working labels Feb 8, 2026
@AhmadYasser1
Copy link
Copy Markdown
Contributor Author

Before / After

Before

BEFORE.Invalid.Email.Message.mov

After

AFTER.Invalid.Email.Message.mov

@AhmadYasser1 AhmadYasser1 marked this pull request as ready for review February 9, 2026 00:41
@graphite-app graphite-app bot added the community Created by Linear-GitHub Sync label Feb 9, 2026
Copy link
Copy Markdown
Contributor

@cubic-dev-ai cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

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

No issues found across 1 file

romitg2
romitg2 previously requested changes Feb 9, 2026
Copy link
Copy Markdown
Member

@romitg2 romitg2 left a comment

Choose a reason for hiding this comment

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

@AhmadYasser1 Thanks for PR! can you please also add tests

Verify the onTouched form validation behavior:
- No error shown while user is typing
- Error appears only after blur with invalid email
- No error for valid email after blur
- Revalidation on each keystroke after first blur
@pull-request-size pull-request-size bot added size/L and removed size/XS labels Feb 9, 2026
@AhmadYasser1
Copy link
Copy Markdown
Contributor Author

@romitg2 Does that work?

@AhmadYasser1 AhmadYasser1 requested a review from romitg2 February 9, 2026 04:25
Copy link
Copy Markdown
Member

@dhairyashiil dhairyashiil left a comment

Choose a reason for hiding this comment

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

Thank you for the contribution, definitely a good ux improvement according to me

@dhairyashiil dhairyashiil enabled auto-merge (squash) February 9, 2026 06:10
@dhairyashiil dhairyashiil added the run-ci Approve CI to run for external contributors label Feb 9, 2026
@romitg2
Copy link
Copy Markdown
Member

romitg2 commented Feb 9, 2026

Screenshot 2026-02-09 at 11 59 15 AM

failing tests seems unrelated, re-triggering CI

@romitg2 romitg2 added ready-for-e2e run-ci Approve CI to run for external contributors and removed ready-for-e2e run-ci Approve CI to run for external contributors labels Feb 9, 2026
@dhairyashiil dhairyashiil merged commit cdf901f into calcom:main Feb 9, 2026
175 of 192 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🐛 bug Something isn't working community Created by Linear-GitHub Sync Low priority Created by Linear-GitHub Sync ready-for-e2e run-ci Approve CI to run for external contributors size/L ui area: UI, frontend, button, form, input

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Email Regex should only incur when email is wrong

3 participants