Geeks With Blogs

expression{web.blog} Thoughts on Expression Web and web tools in general

HTML5 makes form creation and validation a simple matter. The new form input types (email, tel, url etc) allow you to give the correct keyboard type to mobile users. The validation model makes the hassle of client-side JavaScript validation a thing of the past. *

But hold on a minute though. What do we do if we need to cater for older browsers? Well we can use a 'shim' or 'polyfill', as we might to support some of the other HTML5/CSS3 features.

There are several such shims for forms, but the one that seems to be everything a shim should be is 'NWX Forms' created by Diego Perini. Why do I say that? Because you simply reference it on the page, add a line of script to initiate it when the page loads, and that's it. Your HTML5 forms work from IE6 upwards. There's no adding extra classes to the inputs or anything else whatsoever.

If you use Expression Web I have a snippet that adds the necessary code. (See the HTML5 Snippet collection at http://ew-resource.co.uk/sp2-snippets.aspx).

If not it's a simple as this:

<script type="text/javascript" src=" https://s3.amazonaws.com/nwapi/nwxforms/nwxforms-min.js"></script>
<script type="text/javascript">window.onload = Function('nwxforms(this)');</script>

Full details and exmaples/demos on GitHub at https://github.com/dperini/nwxforms

* Don't forget the need for server-side validation too, for complete form security

 

Posted on Sunday, July 21, 2013 11:36 PM HTML5 , Forms | Back to top


Comments on this post: NWX Forms shim - using HTML5 form types and validation in older browsers

No comments posted yet.
Your comment:
 (will show your gravatar)


Copyright © ihaynes | Powered by: GeeksWithBlogs.net | Join free