Month: October 2010

HTML5 forms with fallback for non-supporting browsers

Last week, I did some research into creating fallbacks for the new HTML5 form elements, such as email fields, date fields, etc. As it turns out, this is very easy. I used Modernizr for the feature detection. Although it’s just a 5k script, you could easily extract the required code from it if you want to keep your footprint to a minimum.

Based on the Modernizr results, I applied a CSS class for design purposes and attached event handlers. For example, the code below handles the “required” attribute.

function validateRequired(e) {
var fld = e.element(),
ph = fld.getAttribute('placeholder') || '';
if (fld.value === '' || fld.value === ph) {
console.log('field ' + fld.id + ' is required');
fld.removeClassName('validated');
} else {
fld.addClassName('validated');
}
}

if (!Modernizr.input.required) {
$$('input[required]').invoke('addClassName', 'required')
.invoke('observe', 'blur', validateRequired);
}

I use Prototype.js as my framework of choice, but it can be done just as well with other frameworks or plain javascript. As long as you use Element.getAttribute you can access the new attributes without any problems in all browsers. Of course, this is just proof-of-concept code, so it needs some tidying up for actual production use. I’ll probably create a full Prototype.js library of modules to handle the various attributes and field types. I’m also figuring out a good way to handle data-* attributes so you get an easy way to access those. My aim is to stay as close as possible to the official spec for those interfaces.

I’ve tested the code in IE6, IE7, IE8, Firefox 3.0, Firefox 3.6, Safari 5 (Win), Chrome 6 and Opera 10 and they all work as expected.

Community.js

At JSConf.eu 2010, Chris Williams closed the conference with an inspiring speech to rally javascript programmers to help newcomers to the language find decent documentation and to be proud of the work we do. His goal is to build a community that is open to new members and supportive of existing members. We should accept that our language is a true programming language, not just a “toy language” to create some silly effects on a web page.

He also pointed out that there are many people out there that are just in it for the money. They’ll sell whatever they can, not worrying about quality, about what they leave behind for the next developer to come along. He called them privateers, hirelings without an honor code, who aren’t in it for love of the language, or the challenge it brings.

Of course, some of his speech might be no more than good rethoric, but at least part of it rings true. The bit about promoting the language documentation in particular is a strong point, in my opinion. It’s silly that old, out-dated documentation like w3schools still comes in higher than the quite good, actively maintained documentation at Mozilla’s Developer site. It’s even worse that a download link for Java scores higher than actual javascript documentation.

If you’re serious about javascript development, I urge you to watch the speech. Even if you don’t care about what he says, the presentation in itself is worth watching :-).

Community.js by Chris Williams: http://jsconf.eu/2010/communityjs_by_chris_williams_1.html