Clay’s Blog

I remember getting lost a few times back when I first started using Prototype. I was trying to implement some form validation, which is pretty easy with prototype, but ‘old habits’ were getting in my way. Coming from ‘plain old javascript’, I was accustomed to using ‘return false;’ to cancel a form submission, but when you’re trying to separate form from function(and thats really the whole point of events), you don’t necessarily want to put javascript into your html. e.g.:

First of all, it’s ugly. More importantly though, it mixes your javascript and your html, if you want to rename your validator function you now have to dip into the HTML code(which should probably live in a different file)… ew, divs. Since you’re using prototype you should be using prototype’s event management. Here’s a sample:

And, in order to stop the form from submitting you would use Prototype’s Event library again:

This stops the submission event from ‘bubbling up(or down)’ to the Document Object and being submitted. This is our ‘return false;’

Putting it all together we get something like this:

..and there was much rejoicing. Our HTML and and javascript are separate, our lives are easier. Our new code also makes it clear that form submissions are actually events and that our validation function is a handler for that event.
Cheers!

Apparenly Ryan Campbell wrote on the same subject back in 2006, he claimed that Event.stop() didn’t work in Safari but as far as I know that’s no longer true.
Prototype’s api entry for event.stop.

Tags: javascript form submission, prototype, web forms

This entry was posted on Saturday, September 13th, 2008 at 11:06 am and is filed under Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.