Simple Rails Javascript Form Validation

March 4th, 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

Posted by mikel Filed in Javascript, Ruby on Rails

7 Responses to “Simple Rails Javascript Form Validation”

  1. GregL Says:
    March 19th, 2008 at 12:01 PM

    What about the onsubmit attribute?

    <form> </form>

    returning false stops submission.

  2. Mikel Says:
    March 19th, 2008 at 01:15 PM

    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:
    April 25th, 2008 at 08:56 AM

    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:
    April 26th, 2008 at 01:35 PM

    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:
    April 30th, 2008 at 08:33 PM

    @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:
    May 2nd, 2008 at 12:05 PM

    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:
    May 3rd, 2008 at 12:32 AM

    @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

Leave a Reply