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.
This is something I really wish more sites would take to heart.
I am fairly certain I am not alone in saying that my city government has a website for giving out appointments that does not load without JS and when I do enable JS and complete the rubbish form it fails with an ambiguous error on my desktop computer.
How can even governments, which are supposed to be accessible to everyone within the country manage to push for use of their digital tools but then completely mess them up what feels like every single time?
Javascript and modern CSS should be used to enhance the experience
So much this.
In way too much of the modern web, Javascript and CSS is the experience. Without that, there’s nothing. This shit should be the cherry on top, not the whole thing!
✨ Graceful degradation ✨
Javascript and modern CSS should be used to enhance the experienceSo much this.
Absolutely not this. Javascript and CSS should be outlawed.
I took a very bold decision and built a new version of the site using Astro
https://astro.build/. It was HTML-first. Javascript existed, in web components, but only to progressively-enhance a website that worked perfectly fine without it.My logic was thus:
- This is a public service
- It should work on every machine possible
- It should work when connections are poor
- The forms must never lose data once it is entered
…
The results? When we launched, the number of people completing the form doubled. The analytics people didn’t even know where these users were coming from. Of course, your javascript-based analytics package doesn’t see the users you are bouncing because of javascript failures. It was a flood! We also saw my “keep a backend session, never lose user data” approach pay off. In one case, someone completed a form a month after starting it.
In one case, someone completed a form a month after starting it.
absolutely not me with 200 tabs open, doing 30 things at the same time
considering that I run with noscript on permanently, if the site immediately breaks, I just close the tab. if the site generally works, I will take the time to consider if JS is warranted. thank you for making sites that dont break the web.
