Ahead of any validation for forms should be input masks at every reasonable step.
Make sure that only numbers can be entered into a phone field, and with the correct pattern. Ensure that postal codes can only have numbers and letters, and the letters come in uppercase even if the user presses a lowercase letter. Have a date picker available, sure, but give people the option of just typing it out, and also make it clear that the format will be ISO-8601.
Well thought out input masks provide proactive correction and can massively help avoid reactive validation that only comes up after the user leaves the field or submits the form.
I actually heavily disagree. One of the WORST things you can do for user experience is defy their expectations for input. E.G…
Users expect to have characters appear, where the cursor is, when they press character keys
Users expect to have the character in front of the cursor be removed, when they press [Delete]
Users expect to have the character behind the cursor be removed, when they press [Backspace]
Users expect to have some kind of submission action take place, when they press [Enter]
Users expect to be able to click on things that look clickable
Users expect to not have elements on the page move underneath their fingers (I.E. as they type or click things)
Users expect the contents of their clipboard to be pasted at the cursor position, when they perform a Paste
Breaking these rules by masking certain inputs generally makes them feel HORRIBLE to use.
Banks, for example, love to do this. I hit [1], [0], and [0] on the balance transfer form, to transfer $100, and I end up with a transfer for $1.00, because the validation forces a decimal point to be injected.
I think there are niche cases where keystroke rejection can make sense, but it’s basically never worth the effort. And phone numbers is NOT one of them. When I buy stuff online, and get asked for a phone number, I’m virtually always pasting it in, because the only number I give out on the internet is a throwaway, and I don’t have it memorized. More often than not, it gets rejected, because it was copied as “(XXX) XXX-XXXX”, and the form doesn’t like the formatting, even when that formatting is auto-applied anyway, as you type.
Good form validation involves letting users enter whatever the hell they want (within a max length restriction), and giving good feedback when it’s not acceptable, indicating what needs to be corrected. Also, auto-completion goes a long way, when possible.
Ahead of any validation for forms should be input masks at every reasonable step.
Make sure that only numbers can be entered into a phone field, and with the correct pattern. Ensure that postal codes can only have numbers and letters, and the letters come in uppercase even if the user presses a lowercase letter. Have a date picker available, sure, but give people the option of just typing it out, and also make it clear that the format will be ISO-8601.
Well thought out input masks provide proactive correction and can massively help avoid reactive validation that only comes up after the user leaves the field or submits the form.
I actually heavily disagree. One of the WORST things you can do for user experience is defy their expectations for input. E.G…
Breaking these rules by masking certain inputs generally makes them feel HORRIBLE to use.
Banks, for example, love to do this. I hit [1], [0], and [0] on the balance transfer form, to transfer $100, and I end up with a transfer for $1.00, because the validation forces a decimal point to be injected.
I think there are niche cases where keystroke rejection can make sense, but it’s basically never worth the effort. And phone numbers is NOT one of them. When I buy stuff online, and get asked for a phone number, I’m virtually always pasting it in, because the only number I give out on the internet is a throwaway, and I don’t have it memorized. More often than not, it gets rejected, because it was copied as “(XXX) XXX-XXXX”, and the form doesn’t like the formatting, even when that formatting is auto-applied anyway, as you type.
Good form validation involves letting users enter whatever the hell they want (within a max length restriction), and giving good feedback when it’s not acceptable, indicating what needs to be corrected. Also, auto-completion goes a long way, when possible.