HTML5 Form novalidate
I've been very skeptical when it comes to HTML5 form validation. It's a nice addition, don't get me wrong, but let's be honest -- it's not very powerful and it could get in the way of the JavaScript validation you have in place. If you want HTML5 form validation to be ignored, it's as simple as one attribute on the form element: novalidate:
<form action="/search" method="get" novalidate>
Adding a novalidate attribute to the form element prevents native validation on form elements (if applied), allowing your JavaScript unobstructed ability to manage all validation.
Form validation, in my opinion, is one of the most difficult tasks in web development. Client side validation, server side validation, security, styling, etc. -- forms are a pain.
![5 More HTML5 APIs You Didn’t Know Existed]()
The HTML5 revolution has provided us some awesome JavaScript and HTML APIs. Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers. Regardless of API strength or purpose, anything to help us better do our job is a...
![LightFace: Facebook Lightbox for MooTools]()
One of the web components I've always loved has been Facebook's modal dialog. This "lightbox" isn't like others: no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much." With Facebook's dialog in mind, I've created LightFace: a Facebook lightbox...
![Create Twitter-Style Buttons with the Dojo Toolkit]()
I love that JavaScript toolkits make enhancing web pages incredibly easy. Today I'll cover an effect that I've already coded with MooTools: creating a Twitter-style animated "Sign In" button. Check out this five minute tutorial so you can take your static...
![CSS pointer-events]()
The responsibilities taken on by CSS seems to be increasingly blurring with JavaScript. Consider the -webkit-touch-callout CSS property, which prevents iOS's link dialog menu when you tap and hold a clickable element. The pointer-events property is even more JavaScript-like, preventing:
click actions from doing...
Could you give examples of where html5 form validation would not suffice? My experience is that the default form validation is good enough for most webforms.
The majority of webforms is either just: “Leave a reply”, “Fill in your address”, “Contact us”. Those consist of:
– Email: Overthinking email validation will surely break things(there are plenty of JS validators that will not even accept your .name tld because they check for 3 chars max) pretty much the only requirement is an @.
– Name: So, what is not allowed in a name? If someone calls himself “~?(#” in my form I don’t even mind. It’s not more random than filling in “Aeuh Wajjs”
– Message: I don’t see anything to validate here, except for having a least something.
– Phone number: Should we not validate 00 as +? Or write dashes between numbers? No, we should just either write a script to transform the phone numbers or enforce a format during typing. Neither methods being part of validation itself.
– Address: This is so complicated when you go international. Postal codes are different everywhere. Some houses don’t have a number, just a description like ‘Green house with red porch’.
– File: Giving previews etc is nice but that’s again not a part of validation. Mime type checking is important, but can be done using the accept attribute.
For edge cases my server side script will still give a nice feedback.
For all the rest, notifying the users if they forgot something or made an obvious typo seems enough to me. And that’s something html5 form validation does just fine. Putting in nonsense is probably intentional, should we put much effort into that?
On a sidenote; I would suggest adding novalidate using JavaScript so you still have validation if the script breaks.
One quick example is field B being required if field A is of a certain value. Another example could be requiring a certain value for B if A is of a certain value.
Those are already quite rare advanced cases, which I have no doubt of that you encounter more often than I do.
Besides that those cases would already be horrible for accessibility(often solvable with a lot of effort), you can still use the browser validation by dynamically setting and unsetting the required attribute.
One problem that I have not yet figured out very gracefully is required fields that are hidden. Luckily for usability I try to keep most forms entirely visible anyway.
Jamie Zawinski put it best when he said:
‘Some people, when confronted with a problem, think “I know, I’ll use regular expressions.” Now they have two problems. ‘
He was referring to the typical Perl development attitude at the time, but I think it still holds true today. Too many people try to re-engineer the validation wheel, and it goes horribly wrong. Email addresses are the most obvious one, but at one point or another everything gets a little mangled, from names being forced to match against [a-zA-Z]+ (so your name wouldn’t validate, for example), to phone numbers only accepting digits. A better way of styling the HTML5 validation error messages would be preferable, maybe in the future?
Huh. Handy little bit of code. I totally and utterly agree with what you said about forms. They are a pain to style, a pain to validate. I’ve been using Laravel lately though and validation using that framework is pretty easy. Server side anyway. There’s still JS validation I have to worry about. :)
Why not to use HTML5 form validation? Try it and see how browsers display error messages :)
I’ve done this in a few of my websites. Have JavaScript add the
novalidateelement to my forms, so that the JavaScript can handle the validation.If the user has JavaScript turned off for whatever reason, then the
novalidatenever gets put onto the form, so I can at least have basic validation still.This is an excellent tip, as browsers with disabled JS still get some client-side validation. Cheers!
Also, David – your comment form uses HTML5 validation ; )
I tend to agree with René.
When designing forms it’s best to stick with “KISS! – Keep It Simple Stupid!”.
Having fields/states that show and hide based on conditional logic could easily become an accessibility/maintenance nightmare and should be avoided at all costs.
Also (as has been mentioned) your form above uses HTML5 validation! ;)