1. Client Side Validations 3.0

    30 March 2011

    client_side_validations on Github

    The README and the Wiki are very detailed. Please check them out as well!

    Client Side Validations 3.0 is out! Adding client side validations to an existing Rails 3 project is as simple as: (assuming you are already using jQuery >= 1.4.1)

    1. requiring the gem… 
        # Your Gemfile
  gem 'client_side_validations'

    2. running the install generator… 
      rails g client_side_validations:install

    3. adding the rails.validations.js javascript file to your layout
    4. activating in a given form

      5. And it works! Wait… you don’t see anything?

      Okay, so by default ActionView::Base.field_error_proc will wrap invalid fields with a ‘field_with_error’ class div. We need to extend this to also show the error message. The generator added config/initializers/client_side_validations.rb You need to uncomment the ActionView::Base.field_error_proc override. Now restart your rails app and presto-changeo you’ve got client side validations!

      If you’re using an alternate FormBuilder like like SimpleForm or Formtastic you won’t need to uncomment anything. The error messages will render inline automatically.

      Let’s take a step back and look at the goals of this gem:

      Project Goals
      1. Follow the best practices for client side validations developed by Luke Wroblewski
      2. Automatically extract and apply validation rules defined on the server to the client.
      3. In the cases where a server-side validation rule would not work on the client (i.e. conditional callbacks like :if, :unless) then do not attempt client side validations. Fall back to the server side validation.
      4. The client side validation error rendering should be indistinguishable from the server side validation error rendering.
      5. Wide browser compliancy. I’ve tested with IE8, seems to work OK.
      6. Work with any ActiveModel::Validations based model
      7. Validate nested fields
      8. Support custom validations
      9. Support custom FormBuilders like SimpleForm and Formtastic
      10. Client side validation callbacks

      Breaking these down…

      Follow the best practices for client side validations developed by Luke Wroblewski

      As Luke points out in his blog post Live Validations (or client side validations) are great for increasing conversion rates. He details how validating after a user exits a field yields the highest conversion rates (as well as the least confusion). Client Side Validations follows this philiosophy.

      Automatically extract and apply validation rules defined on the server to the client

      ActiveModel in Rails 3 allows us to reflect upon a given model’s validations. Client Side Validations takes advantage of this to package the rules and i18n messages for use on the client.

      In the cases where a server-side validation rule would not work on the client (i.e. conditional callbacks like :if, :unless) then do not attempt client side validations. Fall back to the server side validation

      Some validations don’t make sense to attempt on the client. Instead of trying to get around this ClientSideValidations ignores these cases with the assumption the server will always be able to handle it better.

      The client side validation error rendering should be indistinguishable from the server side validation error rendering

      Considering that we’re allowing some validations to pass to the server we need to ensure that how the errors render on a server side must match exactly how the errors render on the client side. To this end Client Side Validations uses the power of jQuery to properly render the error for a given FormBuilder.

      Wide browser compliancy. I’ve tested with IE8, seems to work OK

      Pretty self-explanatory.

      Work with any ActiveModel::Validations based model

      As long as your model is using ActiveModel::Validations it should work. This includes ActiveRecord 3, Mongoid 2.0. MongoMapper is in the process of adopting ActiveModel.

      Validate nested fields

      If your forms have nested fields via field_for all validations should apply without any issue.

      Support custom validations

      If you write your own validations they are fully supported with just a small amount of code. The Wiki has a detailed guide on how to add custom validator support

      Support custom FormBuilders like SimpleForm and Formtastic

      Client Side Validations support SimpleForm and Formtastic. Most of the customization options should also be supported. Your own custom FormBuilder can be supported too, look out for a guide on the wiki soon.

      Client side validation callbacks

      Control the behavior of how the error messages appear or how a form handles failing validation with callbacks. The Wiki has a detailed guide on the callbacks

      I hope people enjoy using this library. The re-write has taken a few months of my time and I’m happy to share the work with everybody. If you have any issues at all please don’t hesitate to open an Issue on Github or contact me with any questions!

Notes

  1. small-craft reblogged this from bcardarella
  2. hobbyistgamer reblogged this from bcardarella
  3. sebastienlachance reblogged this from bcardarella
  4. bcardarella posted this