Ticket #861: HOWTO

HOWTO Use Javascript Validation

Note: This is just a prototype of Javascript Validation in Rails to get some early feedback on the design and to give people a feel of how it will look like.



To try the stuff out, do the following:

- Apply the patch to your bleeding edge rails from subversion and start a new project that uses your patched version of rails.

- Add a file "validations.js" to your project's "public/javascripts" directory with the following content:

function validatePresence(field) {
  if (field.value.length == 0) {
    field.focus();
    field.className = "fieldWithErrors";
    alert("Field must be present");
    return false;
  }
  return true;
}

function validateLength(field,max_length) {
  if (field.value.length > max_length) {
    field.focus();
    field.className = "fieldWithErrors";
    alert("Field is too long (maximum "+max_length+")");
    return false;
  }
  return true;
}

- Create some simple model in your db and let rails generate scaffolding code for it.

- Declare some validations (currently supported: validates_presence_of, validates_length_of with :maximum) in the model

- Change the layout for your model to include your validations.js, e.g. add
  <%= javascript_include_tag "validation" %>
  somewhere in the head tag
 
- Change the new.rhtml view generated by scaffolding like this:
  - Make the start_form_tag include a "onsubmit='return validateForm(this)'" property, e.g. change it to
  <%= start_form_tag({:action => 'create'}, { "onsubmit" => "return validateForm(this);" }) %>

  - After the end_form_tag, add another line:
  <%= javascript_validation_for_fields %>
  
- Start up your application and go to the "new" page for your model. Look at the source. Play with the validation.

- Send feedbback to sebastian.kanthak@muehlheim.de (skanthak on IRC) or the mailing list



Some explanations about the design:

- We introduce reflection for validations so that we can examine what validations have been defined
- We store InstanceTag objects for all fields generated via FormHelper's methods in a @rails_instance_tag attribute
- We then generate appropriate JS calls for all fields in our new @rails_instance_tag attribute.


TODO and Issues:
- make JS use the error messages used for the validation macros. We need a way to apply the prepend_text and append_text messages of the ActiveRecordHelper's error_message_on method
- obviously support more validation macros
- add support for users to generate JS code for their own validations ??
- consider ":on => create" and ":on => update" options when generting JS code
- improve JS library