Accessibility Navigation

ImageXY

ImageXY - Mac OS X Batch Photo Resizer

Checkout ImageXY - Painless image resizing for Mac OS X.

Quickly and painlessly bulk resize images, change image formats and create web-friendly photos for your website.

Available on the Mac App Store!

Why Javascript in Forms is Bad

Maybe I have just been visiting a lot of poorly developed websites recently, but I’ve noticed a lot of sites requiring users to have JavaScript enabled to submit their forms. This is bad for many reasons especially when it’s so easy to fix.

Javascript (JS) is often used with forms to ensure that required fields are filled in before letting the user submit. This can be helpful to people with slower connection speeds as it ensures they don’t have to submit a form and wait for another page to load, only to be told that a field has not been completed.

In many cases a JS function will be attached to the submit method of a form and then a series of checks is performed on the data before allowing the form to be submitted. Sometimes JS is used to disable a forms submit button until certain checkboxes or fields are completed, other times JS will remove the action of the form (making the form un-sendable) until data is validated and the form is submitted by a JS action.

In all of these cases you usually end up with a form that is un-usuable by anybody without JS and it complicates things for normal users. Remember making things accessible for disabled users, also usually benefits normal users too!

Bad use of Javascript

I recently stumbled upon a Jewellery e-commerce site where the search field was controlled by JS.

Keyword Site Search With Error

With JS enabled when you hit return or clicked the search button it would check to make sure you entered a search term, but without JS you would hit search and nothing would happen. At which point you think you haven’t pressed the button and so franticly start clicking on it to try and make it work (why do people think clicking an elevator button multiple times will make it come faster?).

Being an e-commerce site, this immediately made me lose trust for the site and made me think about going elsewhere. This one thing may not put off all your potential customers, but four or five small things like this soon add up to make customers lose faith in the site.

By using Javascript on this search form, it:

All this from trying to prevent me from submitting an empty search string. The benefits certainly do not out way the negatives.

So when should I use Javascript

The question should not so much be “when” but “how”. Javascript should always be considered as an “Add-on”, an added feature that when available makes your site more usable and helps the user out.

By using degradable Javascript techniques you can safely add scripts to your webpage and still allow it to fully function for those users without.

A now slightly outdated Task List application called Tweeto that frozensheep (Note: this is my company) developed does just that. It builds upon a basic working version by adding JS to make certain things faster and easier, but gracefully degrades when you have JS disabled.

Creating JS that gracefully degrades is very easy and just takes a little bit of forward planning and we will look at the various methods you should use in another post.

So for now just remember to make sure that if your site uses Javascript…that it also works without, otherwise you’re gonna piss people off.


About The Author

Jacob Wyke is a web developer from the UK who makes complex things simple on the internet. He develops a batch image resizer for Mac OS X called ImageXY which you should try if you ever need to resize anything for the web.

You should also follow him on twitter.