I have to confess, I’m not sure it’s really worth it!If you already have this enhancement (which works in all modern browsers back to IE7), and given that you have James is a freelance web developer based in the UK, specialising in Java Script application development and building accessible websites.Once we’ve got those utilities we can define the main validation function, which tests the field and then performs the actual validation, if applicable: attribute to indicate that state – adding it to an invalid field that doesn’t already have it, or removing it from a valid field that does. Finally, to put this all into action, we need to bind the validation function to an .We could just choose to ignore those browsers, but I think that would be a shame, especially when the problem is so simple to workaround.
And, in any case, , and frankly that would look nicer, but then we’d have no indication in browsers that don’t support box-shadows, such as IE8.
It’s not even full client-side validation – it’s just a subtle usability enhancement, implemented in an accessible way, which (as I discovered while testing the script) is almost identical to something that Firefox now does natively!
then the field will show a red outline, as illustrated by the following figure. If it did, then every required field would have that outline by default.
It just means a bit more convoluted code – we have to get the collections of So there we have it – a simple and non-intrusive enhancement for instant form validation, providing accessible and visual cues to help users complete forms.
You can check out a demo below: See the Pen Instant Form Validation by Site Point (@Site Point) on Code Pen.
Now that we have the static code, we can add the scripting.