Live Validation – Easy Client-side Javascript Validation

live_validation.pngUpdate: Sergio, the author of the livevalidation rails plugin updated the plugin so you can disregard the finale of the article (validates_confirmation_of 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 validates_confirmation_of 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.

17 thoughts on “Live Validation – Easy Client-side Javascript Validation

  1. Pingback: The Best of RubyFlow This Week

  2. Pingback: Client side validation for free (as in beer) at Topper’s Blog

  3. 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!

  4. 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

  5. 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!

  6. 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.

  7. :( It isn’t working on mine either. Nothing seems to be happening even though my model validation is hooked up correctly. Development in rails. Any ideas?

  8. Found It’s doing somthing, it broke my forms built with formfor I wrote with this syntax:
    object.form
    field :method, :o ptions , I got “wrong number of arguments (2 for 3)”
    Looking at the helper, it look like it is accepting only the syntax:
    form_field :o bject, :method, :o ptions
    This confirm the plugin is broken in rails 2.2.2
    Too bad ):, I can’t rewrite all my forms,

  9. Hello, I found this blog post while searching for help with JavaScript. I have recently changed browsers from Chrome to Internet Explorer 7. Now I seem to have a issue with loading JavaScript. Everytime I go on a website that needs Javascript, the page doesn’t load and I get a “runtime error javascript.JSException: Unknown name”. I can’t seem to find out how to fix the problem. Any help is very appreciated! Thanks

  10. Do you have problems with spammers? I also use Blog Engine and I have some nice anti-spam techniques; please Email me if you are interested in an exchange of practices. It is absolutely free to list anything on craigslist, so more and more people and companies are turning to the internet to advertise.

  11. My developer is wanting to persuade me to maneuver to
    .net from PHP. I actually have always disliked the
    concept as a result of costs. But he’s tryiong none the less.
    I’ve been utilizing Movable-type on a number
    of websites for roughly per year and am nervous about switching to another platform.
    I have got heard fantastic things about blogengine.net.
    Is there a way I will transfer my wordpress posts into it? Any help
    could be really appreciated!

    My site KeliFHutsler

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>