I am starting to get into HTML5 development slowly and one of the first things that came across was the forms. HTML5 has got some nice features up it’s sleeve when it comes to forms. I won’t be going into the details of what features are available in HTML5 forms and what they do and how to use them, as there are about 1 billion posts about that already. Just Google it, if you are not aware already. However, in this post, I would like to write about some of the decisions that I made in terms of HTML5 forms usage, in my current project.
The biggest decision that I made was that I got rid of the client side validation totally from all the forms, in favor of new HTML5 attributes, namely “required”, “pattern”, “placeholder”, “autofocus”, “autocomplete”. My thought behind this was that the browsers that support these new features will do the validation for me natively, so I don’t need client side validation plugins like jQuery Validation plugin (which is pretty awesome BTW). And I would tighten my server-side validation to cover all scenarios and edge cases just to make sure nothing dodgy gets through the forms. This gives me 2 advantages. First off, I am relying on browsers’ capabilities to do the validations for me and getting rid of some of the code and achieving same results (less is more!) and secondly, my server-side validations are now a lot more tight and secure (not saying, they were not before, but it gave me a chance to dig into server side validation and make sure absolutely nothing is left out).
To get an idea of which browsers currently support these new features, you can go to the awesome caniuse.com – you will see that apart from IE10, no other versions of IE support these features yet. Opera seems to be most compatible with these new features. Firefox and Chrome seem pretty good too. But as always, we can’t just forget IE (I really wish we could! but we can’t!) – looking at the analytics of several websites, it’s pretty obvious that although IE usage is declining but the decline rate is slow and it will take it’s own time to slowly die. And who knows, it may not have to die, IE9/10 are not that bad, after all. Well, back to the subject, that browser war that seems to be going on in terms of feature compatibility is not helpful at all for a developer.
So, having said that, I was left with 2 big concerns :-
- Client Side Validation for browsers that don’t support it
- Client Side AJAX Validation (e.g. checking if a username is available as the cursor moves out of the input field)
Thankfully, solving the first concern was pretty straightforward. Thanks to the awesome Webshims lib, it was a matter of literally 1 min to get it working. All you need to do is, copy the contents to your project, include the JS and choose what options you want. If you want to achieve just the forms compatibility, all you need to do is this :-
[js] <script src="/lib/vendor/js-webshim/minified/polyfiller.js"></script>
<script>$.webshims.polyfill(‘forms forms-ext’);</script>[/js]
Webshims works on top of jQuery and Modernizr (which I already had in my project anyways), so you will have to include those 2 libs as well, if you haven’t already. There are some other libraries out there that do similar things, too, like H5F and nwxforms but I haven’t tested these out yet. But if anyone has got any experience (+ve or -ve) with any of the other shims or js libraries for fallback options, I would love to hear about them too.
Although, I am pretty sure, everyone knows about this, but still for the matter of completeness, I am posting some screenshots of how the “required” attribute client side validation looks like in different browsers.
The way it looks like in Firefox :-
The way it looks like in Chrome :-
The way it looks like in Opera :-
The way it looks like in unsupported browsers using Webshims :-
So, I think that is pretty good for now. Since, these new features are only going to be supported from IE10 onwards and IE9 is not going to go away for a while (let alone IE8 or 7), I think we are going to have to stick to these solutions for some time. A few years maybe.
Anyways, coming back to the second issue I was having, about not being able to use AJAX client side validations. Basically, my solution to this was simply not to use any client side AJAX validations on the forms. I mean, I’ve got some JS code in place that submits the form via the jQuery Form plugin and gets back a JSON response from the server and because the server side validation would return an error if e.g. username was already taken or the email was already taken, then it’s pretty easy to show an error message on the screen using JS. I will not go into too much detail on this here as there are a million ways to do this and everyone does this differently but I decided to wait for the user to submit the form before I validate things like username and emails that need to be checked against the backend. I would love to hear what other people think about this particular scenario, though.
