While this is a long way off from completed I thought it was quite cool, and didn't find that many other articles on the topic so here goes;

For those of you who like to see before you do, see the finished product here.

Update

The code is in subversion and should be working, let me know if you can't install the plugin. I've enabled global read access for this repository but not sure if it works yet.

script/plugin install http://svn.davidjrice.co.uk/svn/projects/plugins/ajax_validation

The plugin abstracts a couple of things that are common for trying to validate a model with ajax, this is my first plugin so i'm not really sure how to test it but once i figure out... anyway i'm making a couple of assumptions in the plugin so here they are:

  • You are using rails 1.1.6 +
  • It assumes that your model/controller are singular/plural post/posts
  • It assumes you are using the form_for helper
  • It assumes you like ordered list forms :) I know i do.
  • It definitely doesn't work with dates yet
  • You know how to set up a new rails application

Okay lets start from scratch, fire up your terminal, create a new rails app and follow along;

script/plugin install http://svn.davidjrice.co.uk/svn/projects/plugins/ajax_validation/
script/generate scaffold_resource post title:string body:text published_at:datetime

The model

Lets just throw in a couple of validations to see it's working

class Post < ActiveRecord::Base
    validates_presence_of :title, :body, :published_at
    validates_length_of :title, :in => 3..200
    validates_length_of :body, :minimum => 10
end

The controller

Apart from what's already created from you, you'll want to add the following

class PostsController < ApplicationController
  ajax_validation_for :post
  ...
end

The view

To save time i'll only demonstrate the new.rhtml

<h1>New Post</h1>
<%= error_messages_for :post %>
<%- ajax_validation_form_for(:post, :url => posts_url, :html => {:id => "post_form", :legend => "Post Details"}) do |f| -%>
  <%= f.text_field :title, :label => "Post title", :hint => "between three and two hundred characters" %>        
  <%= f.text_area :body %>
  <%= f.datetime_select :published_at %>   
  <%= submit_tag "Create" %>
<%- end -%>
<%= observe_form :post_form, :url => validate_posts_path, :frequency => 2 %>

As you can see that is using a new method, ajax_validation_form_for... it's the same as form_for only the fields that are generated are wrapped like the following so if it's a field like select, or collection select you'll have to write it by hand as the rjs that is returned depends on some of the fields having the correct ids and supporting elements. oh yeah, and there's a :hint and :label attribute added to the options for the fields, try it and see.

<li id="post_user_id_item">
    <label for="post_user_id">Author<span class="hint"></span></label>
    <%= f.collection_select :user_id, @users, :id, :display_name %>
    <span id="post_user_id_validation"></span>
</li>

Once you've got that all hooked up, you should have something like the example i've shown. Although, your mileage may vary :) I look forward to seeing if anyone else finds this useful.

Quick Rails related note

In the above view code, you'll notice the following line;

<%= observe_form :post_form, :url => validate_posts_path, :frequency => 2 %>

This works because i've applied the patch to rails I submitted here http://dev.rubyonrails.org/ticket/6721 however a quick hack to get it to work is to replace the above code with

<%= observe_form :post_form, :url => validate_posts_path, :frequency => 2, :update => {} %>

13 Responses to “Inline AJAX form validation plugin for ruby on rails”

  1. Jens Says:
    A great idea! I would like to extend it for user friendliness, i.e. show the error message only when the user leaves the respective input field. Then, when they re-enter it, the errors can be checked "live". Otherwise if a field suddenly becomes red, users will stop and think they have done something wrong, although they could just continue typing.
  2. shuller Says:

    Thank you for your acrticle. It helps me very much.


  3. Ustin Metka Says:

    Its not working with Rails 1.2.3 =((


  4. Mim Says:

    Nice, very nice


  5. Daniel Presgrave Says:

    Very impressive!

    Does it work with Rails 2.02?


  6. Daniel Presgrave Says:

    Answering my own question: yes, it does work with rails 2.02


  7. Aditya Raj Says:

    Hi,

    I am using your plugin and I really find it amazing and useful.

    I have came across a bug/issue I believe and that is with radio buttons I am getting an error "type error current has no properties"

    Can you please suggest me how this can be resolved.

    Thanks and regards -Aditya Raj


  8. David Rice Says:

    Daniel, cheers for investigating. I might whip this out sometime soon and improve it.

    Aditya, no idea. If you put the code and app somewhere I can see and fire me a mail I can give you a hand.

    People, this is just a prototype so some investigation is needed for anything more than shown above! I will be moving it to github very soon and all of your patches will be welcome :)


  9. Jose Says:

    Hi David, I´m trying to make your impressive plugin work on Rails 1.2.5. I followed your instruction and I´m getting "Form is not defined" on my error console in Firefox when executing this line:

    new Form.Observer('login_form', 2, function(element, value) {new Ajax.Updater({}, 'login', {asynchronous:true, evalScripts:true, parameters:value})})

    Am I missing something?


  10. sashi Says:

    thanx a lot mate , its super cool ... :)


  11. y-y Says:

    yyyy-y


  12. supriya Says:

    hi i tried using your plugin. The problem im facing is with this line : <%- ajaxvalidationformfor(:post, :url => postsurl, :html => {:id => "postform}... its giving error with postsurl not found.. where do we have to write this function or give some path .. please clearly mention it with an example.

    same problem occurs with <%= observeform :postform, :url => validatepostspath, :frequency => .. where validatepostspath not found!!

    What are these two things..

    Kindly reply Thanks


  13. unsecure cards Says:

    Nice Site! http://google.com


Leave a Reply