I recently stumbled upon the
Anyway I thought this is a handy little helper that I could give a try so I started working around with it, checking what I can do and what I can't.
Above you see the basic markup for a simple use case of
:invalid. You can apply everything you want so far I've tested. In my opinion
border are the best and most basic use cases where this makes sense.
Strange behavior of :valid
:invalid pseudo class makes perfect sense I found some strange behavior while experimenting with
When the user starts typing the color will be red, as soon as he writes
yourname@g the color will turn green - because the eMail is now valid, even though it's not finished and here comes the point I start wondering: Why doesn't it check for a dot followed by at least 2 letters? The chances that this would be a valid email and this can be marked valid is much higher then triggering the valid pseudo class right after someone puts a letter behind the @ mark.
Mozilla's Firefox and Google Chrome behave the same way, both trigger the
:valid class as soon as there is one character behind the @ mark. I wonder if this is specified by W3C - and now I ask: Is this really the best way to handle
:invalid pseudo classes? Wouldn't it be better to wait until the user types at least one dot followed by a letter after the user already wrote an @ mark? This would, in all cases, make sure the email is set up correctly.
# Firefox and Chrome trigger :valid
# at this point
# I suggest triggering after
# 2 letters have been entered
# because chances that the email
# is valid are much higher here
I hope that they'll change this behavior in the future so it's save to use :valid on email inputs and it works correctly. What do you think about
You can find a working example of :valid and :invalid here at CodePen.