A few notes I’ve collected from working on form field validation for Checkout, Forms, and Settings.
1. Prevention is better than correction
The “right” way should be the easiest way. Use input masking and contextual help text to shape correct input from the start.
✅ Auto-formatting credit card numbers (e.g., 1234 5678 9012 3456)
✅ Pre-filled country codes in phone fields
✅ “MM / YY” hints in expiration date inputs
2. Wait for onBlur, not onKeyPress
Nobody likes being interrupted mid-sentence. Instead of validating on every keystroke, wait for onBlur—after the user leaves the field.
✅ Less stressful
✅ Prevents flickering errors while typing
✅ Feels more human
Once the user returns to the field, the error should persist until the field is corrected. The password form field use case is one exception where onKeyPress validation could provide useful guidance.
3. Say what’s wrong, and how to fix it
Skip the cryptic red text. Use simple, specific language:
❌ “Invalid input”
✅ “Not a valid email address”
❌ “Required”
✅ “Please enter your phone number to continue”
These are some of the key guidelines that apply equally to shopper and admin experiences IMO. Would love to hear thoughts and questions on all of the above. What are your top form field validation gripes?