Rails Real-Time Form Validation Plug-in

Written By Vince Puzzella

The RTV plug-in uses AJAX to validate form data against a model in real-time. AJAX requests are made as the user is filling in form fields. The form data is then validated against a model on the server-side. RTV then responds with javascript that dynamically updates the HTML document. This enables you to mark form fields as valid/invalid using CSS.

The download package now includes a sample rails application. It does not need a database to run, thanks to this. Simply execute ./script/server from the rtv_sample_app directory and point your bwoser to http://localhost:3000.

I look forward to your comments, suggestions and critisism. Please, have your say in the forums!

Usage:

In your controller:

include UIEnhancements::RealtimeValidation
helper :RealtimeValidation
realtime_validation_for(:the_form_id, :the_model)

In your view, after a form:

<%= realtime_validation_for :the_form_id, :the_model %>

In your CSS (example):

.fieldWithoutErrors,
.fieldWithErrors
{
    outline-width: 1px;
    outline-color: white;
    outline-style: solid;

    /* !!HACK!! IE will not use this because it does not understand !important.  Border is not needed for firefox, so make it 0px!*/
    border-width: 0px !important;    
    /*for IE!*/
    border-width: 1px;
    border-color: white;
    border-style: solid;
}

.fieldWithErrors
{
	background: pink;
	background-color:pink;
    outline-color: red;
    	    
    /*for IE!*/
    border-color: red;
}

/* Browser support may be limited here...*/
.fieldWithErrors input,
.fieldWithErrors select,
.fieldWithErrors textarea
{
	background: pink;
	background-color: pink;
}

Known to work with:

• Rails 1.1.6
• FireFox 2

That's it, enjoy!