The form that only needs to say yes
A checkout form has one job: accept a customer who has already agreed to pay. Yet field by field, validation quirks quietly talk people out of it, not with error messages but with a form that will not accept what a human types. The result is the invisible tax on every card-not-present store: orders that were wanted, started, and then abandoned because the machine kept saying no to real people. Here are the five fixes.
1. Accept spaces in card numbers
People who have typed their card number into a form before do it in four groups of four, muscle memory from a decade of embossed plastic. A form that rejects spaces in 2026 is not being careful, it is being difficult. Strip the spaces before checking the digits, exactly as payment APIs like Stripe expect, and let people type the way their hands already do.
const digits = value.replace(/\s+/g, '');
if (/^\d{13,19}$/.test(digits)) { /* valid enough to proceed */ }Copy-paste this test into your team chat: type a card number with spaces. If the field turns red before you finish, it is failing customers who are doing nothing wrong.
2. Validate the phone number the way the person wrote it
Phone fields are the strictest teachers on the internet. They correct nothing and forgive nothing. Formats vary by country, by carrier, and by whichever way a person happens to write their number, so the regex that insists on one shape rejects valid numbers all day.
const phone = value.replace(/[\s\-()+.]/g, '');
if (/^\+?\d{8,15}$/.test(phone)) { /* plausible, move on */ }If the field genuinely needs a specific format, say so in the placeholder before the typing starts, not in the error afterwards.
3. One email field. On the label, not as decoration.
Nobody abandons a checkout over a second email field, but plenty slow down enough to reconsider. The double-entry pattern was designed for a desktop keyboard era and now mostly signals distrust. If you must keep it, make the reason visible: confirm your email, because order updates go there. Better, drop the second field entirely and put the real protection in the confirmation email, where typos get caught before anything ships.
4. Never wipe a field the customer has already fixed
This is the one that loses whole orders. Password fields that clear on a failed attempt, forms that lose the card details when a validation message appears, postcode boxes that revert to blank after a refresh. Every one resets a customer to zero in their head, even if the browser kept the data.
input.setAttribute('autocomplete', 'on');
input.setAttribute('autocapitalize', 'none');
input.setAttribute('spellcheck', 'false');After any validation error, re-render the form with whatever the customer actually typed still in place, error marked, everything else untouched. The browser remembers. Let it.
5. Say what went wrong where the mistake happened
A red banner at the top of the page listing error 4, field 9 is an audit log, not a message. The fixes are plain: put the message beside the field, say what to do rather than what not to do, and mark already-passed fields in a green that is visible in colour blindness, a tick plus a text label.
<label>Postcode
<input type="text" ... >
<span class="error">Enter your 4-digit postcode</span>
</label>Test it like a customer, not a developer
After the fixes, place a real order during a test session with autofill disabled. Type the card with spaces. Add a stray dash in the phone number. Submit with one empty field, fix only that field, and check nothing else got cleared. Ten minutes, and it is the honest rehearsal of exactly how real hands behave.
The form that accepts people as they actually type is part of the product. This one is quietly worth more than the banner above it, because it is where the sale is finally allowed to finish.
Want more like this? Join MOKU Club for free. Weekly resources, early access to new guides, and occasional templates you can actually use. Join below.
