Form validation best practices: accept real input

A quote form that checks the moving date against the server's clock can reject the date a visitor picked. A visitor in another time zone picks today and sees 'Date must be in the future', because the server is already on tomorrow. The visitor cannot see the rule, so they change the date, then the postcode, then the name, and assume the form is broken. The same pattern hits names with an apostrophe, phone numbers typed with a space after the country code, and postcodes with a space in the middle. Each one is a rule written from the owner's own data, not from what people type.

• Each rule states its format in words beside the field, before the visitor types.
• Phone numbers lose spaces, dashes and brackets before the check, and accept a leading plus.
• Date rules use the visitor's own day, so a move dated today is allowed.
• Errors appear when the visitor leaves a field or presses send, not on every key press.
• A failed submit keeps every typed value and moves focus to the first field with an error.

The wrong version is a postcode rule copied from the four areas you already serve, so a visitor from a fifth area is refused for a correct postcode. The right version accepts the formats of every area you might serve, and you check it against a list of real entries, typed the way people type them, with and without spaces, in capitals and in lower case. The same goes for choices. If a dropdown holds only the regions on your last invoice, a visitor who lives beyond them has no option that fits, and the form gives them no message to explain why. Add an 'Other area' choice that asks them to say where, so a valid answer always exists.

A phone rule that counts every character can read '+49 30 1234567' as too long, because the spaces and the plus are not digits in its test. Strip the separators first, then check the digit count for the country, and only then decide the number is wrong. Names are the other common casualty. A rule that requires a space rejects a single name, and a rule that allows only letters rejects an apostrophe in O'Neil or a hyphen in a double surname. Accept letters from every alphabet, apostrophes, hyphens and accents, and require only that the field is not empty.

Checking on every key press flags a phone number as wrong before the visitor has finished typing it, and the red border then looks like a verdict. Check when the visitor leaves the field, and again when they press send. The wrong version resets the form after a failed send, so the visitor retypes the address, the date and the message to fix one postcode. The right version keeps every value, moves focus to the first field with an error, and puts the message beside that field. On a phone the message has to sit above the keyboard, not under a button the keyboard hides. If a simulated visitor reaches a failed send, its screenshot shows whether the values stayed.

A moving company adds a region, a second phone country or a holiday date rule, and the form starts rejecting input it accepted last month. Run the same visitors through the quote form after each rule change, with entries typed the way a stranger types them, including a name with an apostrophe and a phone number with spaces. Test on a phone too, where autofill can put a value in a format the form does not expect.