You know, for users the best login is no login at all. But we still need one, and the most popular is the email/password form. And honestly, most of them are a mess. They nag you too early or too late: red errors when you've already typed a perfectly good email - or before you've typed a single character. I've seen it a lot.
Here I want to share one way to make this better - a very opinionated one. I don't want to drift into the "philosophy of UI", so it's a concrete example on a concrete stack: React, TanStack Form, Zod, and e.g. Better Auth on the backend.
Reward early, punish late
This is the main principle of good validation UX: find the right moment to tell users they messed up. And the right moment to tell them they're back on track.
The most common mistake is being too eager. The form screams "Invalid email!" while you're still typing. That's how the browser's native <input type="email"> behaves, and how most libs do it too with onChange.
