Live Validation - Easy Client-side Javascript Validation
April 15th, 2008
Update: Sergio, the author of the livevalidation rails plugin updated the plugin so you can disregard the finale of the article (validatesconfirmationof is working, as well as the newest version of livevalidation, 1.3 is used in the plugin - so no additional tweaking is needed, install and validate away 
)
Surely I am not the only one who was a ‘bit nervous’ (that was a mild euphemism) when his carefully entered data disappeared after submitting a form to the server. Nowadays web applications are doing better than that - valid data is saved and only the problematic fields are pointed out.
Of course even that feels so 1990’s now. A contemporary (ehm… web 2.0?) web application is expected to validate the form on the client side already (WARNING! That doesn’t mean at all you shouldn’t validate on the server side though - client side validation is for the good guys but you should still look out for the script kiddies et al), pointing out the errors on the fly so there is no need to come back and change/edit those fields after submitting a form.
My library of choice is livevalidation, which has a Rails companion too - if you are using Rails form helpers and standard validation on your models, you don’t have to touch anything just install livevalidation (=drop it to your javascripts folder, it’s a single .js file). w00t!
The only major shortcoming (from my POV) of the Rails plugin is that validatesconfirmationof is not implemented. However, it’s easy to add it via standard javascript:
<input id="user_password" name="user[password]" size="30" type="password" />
<input id="user_password_confirmation" name="user[password_confirmation]" size="30">
<script type="text/javascript">
var validate = new LiveValidation('user_password_confirmation');
validate.add( Validate.Confirmation, { match: 'user_password' } );
</script>
That’s it!
One more note: the Rails plugin contains version 1.2 but there is a newer version, 1.3 so be sure to replace it.
tags:JavaScript Rails
April 16th, 2008 at 5:42 am
[…] Live Validation for Rails — Live validation plugin for rails makes validating forms client-side a no-brainer. […]
April 16th, 2008 at 6:37 am
[…] Ruby, Rails, Web2.0 » Blog Archive » Live Validation - Easy Client-side Javascript Validation My library of choice is livevalidation, which has a Rails companion too - if you are using Rails form helpers and standard validation on your models, you don’t have to touch anything just install livevalidation (=drop it to your javascripts folder, it’s a single .js file). w00t! […]
April 17th, 2008 at 2:02 am
Hello, and thanks a lot for reviewing my plugin, I hope you find it useful.
BTW, validatesconfirmationof is supposed to work, so if it doesn’t for you please send me your code and I’ll try to fix it.
I’ll update the JS library to version 1.3 soon (as soon as I check it works OK with the plugin), I didn’t even know it was released! (I don’t follow its development very much; actually I wrote this plugin mainly because I don’t like JS =;-) )
Thank you!
April 18th, 2008 at 5:52 am
Hey Sergio
Well I guess I was depending too much on the info I got from you
You wrote on the plugin page that it’s not working, so I considered it true and went with the javascript version. So does it work now? If it does, and you replaced the 1.2 with 1.3, drop me a message please and I’ll update the article.
Thanks for dropping by!
Peter
April 18th, 2008 at 1:07 pm
I would prefer something Web Forms 2 compatible http://www.whatwg.org/specs/ There are some libraries already, but probably not ready for production yet.
April 19th, 2008 at 1:12 pm
Oops! Docs were slightly outdated; they are updated now.
I have also updated the Javascript library to version 1.3 (remember to rerun the rake task).
Thank you!
April 20th, 2008 at 2:06 am
Sergio,
Updated the article, thanks for your hard work!
April 22nd, 2008 at 9:09 pm
I love the plugin, but I can’t get it to work with rails as a plugin. I can add my own javascript in the view for a validation and it works, but the ‘install and let it work’ isn’t working, it just doesn’t try to validate anything in my form. Anyone else having this problem or know how to fix it? I didn’t change anything form the install, just followed the directions and gave it a try.