Simple Rails Javascript Form Validation

Sun Mar 02 18:57:26 -0800 2008

If you have a form with some required text fields (like, name, password) then waiting for your users to hit submit is too late to tell them those fields are required. The other option is disabling the submit button until they have filled in the data, here is how…

First, you need to have the javascript default libraries loaded in Rails to make this work.

Once you have done that, then open up your public/javascripts/application.js and enter the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

document.observe('form:button_disable', function (event) {
  // Find the button that we want to disable
  var button = $('ButtonDomID');
  // Disable it!
  button.disabled = true;
  
  // Find the field that is required:
  var required_field = $('FieldDomID');
  
  // Set up an observer to monitor this field
  new Field.Observer(required_field, 0.3, function() {
    // If field == '' then button disabled = true
    button.disabled = ($F(required_field) === '');
    });
});

And that’s it!

You should also put a little note at the bottom under your submit button that says it won’t work until you enter something.

You can put whatever logic you want into the Field.Observer, for example, replace the button.disabled = line with the following and it will check to see it has a minimum length as well:

1
2
3

length_ok = ($F(required_field).length >= 10);
not_empty = ($F(required_field).value !== '');
button.disabled = !(length_ok && not_empty);

blogLater

Mikel

  1. GregL Says:
    Tue Mar 18 07:01:48 -0700 2008

    What about the onsubmit attribute?

    returning false stops submission.

  2. Mikel Says:
    Tue Mar 18 08:15:12 -0700 2008

    Greg: Good point, though on this form I did not want the user to be able to hit the submit button at all – ie, have it disabled until the requirements were met.

    But that would work if you wanted to pop up an alert or some other client side processing before the form was submitted.

  3. Bill Says:
    Thu Apr 24 05:56:39 -0700 2008

    Is there a DRY way to do this? If I’ve already setup all my validation rules in my models, then it’d be nice if I could get Javascript validation “for free”.

  4. Mikel Says:
    Fri Apr 25 10:35:18 -0700 2008

    Turns out there is a more complete way to do it:

    http://livevalidation.rubyforge.org/

    This uses the live validation javascript library. I haven’t used it, but looks cool.

    Mikel

  5. Simon Says:
    Tue Apr 29 17:33:55 -0700 2008

    @mikel:

    The livevalidation plugin is still very green. Basically, it’s unusable if you have any sort of validation within a validate method. In addition to this you’re gonna have to hack the plugin to get it to display the errors in a way you’d like.

    I got so annoyed with it that I went back to just hacking the livevalidation JS!

  6. blaine Says:
    Thu May 01 09:05:01 -0700 2008

    Nice post, pardon my denseness but what would be the process of adding multiple required fields? Is there an easy way in prototype to just make an array and loop through it?

  7. Mikel Says:
    Thu May 01 21:32:17 -0700 2008

    @blaine – Absolutely, you want the prototype “each” function, works almost exactly the same as Ruby’s each, you can find out more on the prototypejs.org/api pages.

    Then you just apply that true / false to each element of the form. It’s a bit more complex, but I do it on another form for similar things.

    Check out my “field monitor” page (it is in the side bar under pages). This does something similar to what you are after.

    Mikel

  8. Vinay Says:
    Tue Aug 12 13:27:57 -0700 2008

    I m getting javascript error in firebug console saying “document.observe is not a function”

    but i included <%= javascript_include_tag :defaults %> in header

  9. Larry Says:
    Sun Oct 19 22:45:42 -0700 2008

    Not real sure what should go here: ‘form:button_disable’. Can’t get this to work for me but love the idea. Disclaimer: not a javascript guru.

    Thanks in advance for any help!

Leave a Reply