You may have seen you can enter an email like.a@a
Without any doubts you want a real e-mail address, so by defining a precise pattern that our data must match, we can validate what’s filed. Let’s make sure it trial the pattern of having a dot and two or three characters at the end. We can do this using the pattern
attribute and regex.
Now try the email input in this demo:
Instant Feedback
Wouldn’t it be good if our input would show some sort of clue when it was valid? Happily, there’s a :valid
CSS selector for that. There’s also a :invalid
selector. Enter your name in this demo:
vadiator
You might think about expecting something like :invalid:not(:empty)
but it won’t work because browsers are a fool and always consider form elements empty.
F name
For now, our best bet is to add some JavaScript to toggle a class bank on if the input is empty or not. Here’s the working demo:
F name
Making it Gorgeous
My favorite part about this entrance is you have complete CSS control over every bit of your form.
name
By pushing the under<span>
the we<input>
gain access to the adjoining sibling selector in our .empty
class. We can then compose a faux placeholder which elegantly slides out of the way as soon as the input is no longer empty. Here’s an example:
If the reality<span>
under the <input>
displease your sensibilities or isn’t accessible enough, you can ever tweak the JavaScript to add the empty
class to the <label>
instead.
label
Possible Caveat
I don’t automatically think this is a bad thing since people will be used to these validation styles. In fact, that’s seemingly why browsers decided to axe our access to them. Now they are standardized.
They’re also out of the flow of the page so you don’t have to trouble about them forward form elements around with their presentation.
match
See more:
HTML Video Website Templates
HTML5 tools to make your life easier – Part 2