A great reminder of just how much you can do with modern markup and styles when it comes to form validation. The :user-invalid and :user-valid pseudo-classes are particularly handy!
A handy little script from Aaron to improve the form validation experience.
A neat little tool when you need a reminder about what elements can go in other elements.
Just like brand values, mission statements, or vision decks, design principles can be generic and provide little to no actual value.
But used correctly, design principles help you make decisions resulting in a superior experience.
Be liberal in what you accept:
Basically, if your form can’t register Beyoncé – it has failed.
Six steps that everyone can do to catch accessibility gotchas:
- Check image descriptions
- Disable all styles
- Validate HTML
- Check the document outline
- Grayscale mode
- Use the keyboard
The slides from a presentation by Drew on all the functionality that browsers give us for free when it comes to validating form inputs.
Half the battle of the web platform is knowing what technology is out there, ready to use. We’re all familiar with the ability to declare validation constraints in our HTML5 forms, but were you aware there’s a JavaScript API that goes along with it?
How a certificate with extended validation makes it easier to phish. But I think the title could be amended—here’s what’s really broken:
On Safari, the URL is completely hidden! This means the attacker does not even need to register a convincing phishing domain. They can register anything, and Safari will happily cover it with a nice green bar.
Like Lighthouse, but from Microsoft.
Dave uses just a smidgen of JavaScript to whip HTML5’s native form validation into shape.
Instead of being prescriptive about error messaging, we use what the browser natively gives us.
Good question! And a good answer:
If you really need it, which you probably don’t,
readonlyis what you want.
An interesting idea from Ruth—using subtle sounds to augment inline form validation.
There aren’t any extremely established best practices for this stuff. The best we can do is make tasteful choices and do user research. Which is to say, the examples in this post are ideas, not gospel.
Form validation taken to the extreme. If you want to know more about how it was done, there’s an article explaining the markup and CSS.
A few straightforward steps for improving the usability of credit card forms. The later steps involve JavaScript but the first step uses nothing more than straight-up HTML.
I saw Christian speak on this topic at Smashing Conference in Barcelona. Here, he takes a long hard look at some of the little things that sites get wrong when doing validating forms on the fly. It’s all good sensible stuff, although it sounds a bit medical when he takes about “Premature Inline Validation.”
This is a truly fantastic example of progressive enhancement applied to a form.
What I love about this is that it shows how progressive enhancement isn’t a binary on/off choice: there are layers and layers of enhancements here, from simple inline validation all the way to service workers and background sync, with many options in between.
Superb!
This is my go-to method for adding validation messages to forms—I think I first heard about it from Derek—so it’s nice to see it corroborated by Steve:
Add the error message as a child of the label element associated with an input.
A handy little script that attempts to check email inputs for misspelled domain names. I’m pretty sure it doesn’t need to be written as a jQuery pug-in, though: anyone want to fork it and create a non-jQuery version too?
A handy list of regular expressions that you can use in the new pattern attribute on the input element in HTML5.
An excellent zero-edit counter-proposal from Anne detailing why version numbers are unnecessary and undesirable for HTML.