Custom HTML

You may customize the html output this way on client_side_validations 3.1.0 :

in config/initializers/client_side_validations.rb

  require 'client_side_validations/simple_form' if defined?(::SimpleForm)
  require 'client_side_validations/formtastic'  if defined?(::Formtastic)

   ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
     unless html_tag =~ /^<label/
       %{<div class="toto"><div class="field_with_errors">#{html_tag}</div><label for="#{instance.send(:tag_id)}" class="message" style="float:right;">#{instance.error_message.first}</label></div>}.html_safe
     else
       %{<div class="toto">#{html_tag}</div>}.html_safe
     end
   end

You have to keep <div class="toto"></div> and you must keep the same class for the label and the non-label output. You can change the name of this css class, but both should match as shown here.

example : this works :

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
   unless html_tag =~ /^<label/
     %{<div class="chuck norris"><div class="field_with_errors">#{html_tag}</div><label for="#{instance.send(:tag_id)}" class="message" style="float:right;">#{instance.error_message.first}</label></div>}.html_safe
   else
     %{<div class="chuck norris">#{html_tag}</div>}.html_safe
   end
 end

This won't :

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
   unless html_tag =~ /^<label/
     %{<div class="chuck norris"><div class="field_with_errors">#{html_tag}</div><label for="#{instance.send(:tag_id)}" class="message" style="float:right;">#{instance.error_message.first}</label></div>}.html_safe
   else
     %{<div class="google">#{html_tag}</div>}.html_safe
   end
 end