Inline AJAX form validation plugin for ruby on rails
November 29th, 2006
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 => {} %>


February 23rd, 2007 at 12:19 PM 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.
July 27th, 2007 at 03:18 PM
Thank you for your acrticle. It helps me very much.
August 17th, 2007 at 10:10 AM
Its not working with Rails 1.2.3 =((
September 28th, 2007 at 10:50 AM
Nice, very nice
January 28th, 2008 at 09:15 PM
Very impressive!
Does it work with Rails 2.02?
February 14th, 2008 at 09:12 PM
Answering my own question: yes, it does work with rails 2.02
March 31st, 2008 at 09:15 PM
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
April 13th, 2008 at 04:18 PM
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 :)
April 15th, 2008 at 08:37 AM
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?
April 20th, 2008 at 12:45 PM
thanx a lot mate , its super cool ... :)
May 26th, 2008 at 12:31 PM
yyyy-y
June 2nd, 2008 at 12:23 PM
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
June 28th, 2008 at 02:43 AM
Nice Site! http://google.com