Form builder for Twitter Bootstrap v2 form elements

bootstrap.rb

# This file goes in config/initializers
require 'bootstrap_form_builder'

# Make this the default Form Builder. You can delete this if you don't want form_for to use
# the bootstrap form builder by default
ActionView::Base.default_form_builder = BootstrapFormBuilder::FormBuilder

# Add in our FormHelper methods, so you can use bootstrap_form_for. 
ActionView::Base.send :include, BootstrapFormBuilder::FormHelper

### Only use one of these error handling methods ###

# Get rid of the rails error handling completely.
ActionView::Base.field_error_proc = Proc.new do |html_tag, instance_tag|
  "#{html_tag}".html_safe
end

# Only remove the default rails error handling on input and label
# Relies on the Nokogiri gem.
# Credit to https://github.com/ripuk
ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  html = %(<div class="field_with_errors">#{html_tag}</div>).html_safe
  elements = Nokogiri::HTML::DocumentFragment.parse(html_tag).css "label, input"
  elements.each do |e|
    if e.node_name.eql? 'label'
      html = %(#{e}).html_safe
    elsif e.node_name.eql? 'input'
      html = %(#{e}).html_safe
    end
  end
  html
end

bootstrap_form_builder.rb

#
# Changes:
# 2012-06-05 allard: Added inline help messages, set default check_box label if none is set
#
# This file goes in lib/
# Usage:
# <%= bootstrap_form_for @calendar_entry do |f| %>
#   <%= content_tag :legend, (locals[:title] || 'Edit Calendar Entry') %>
#   <%= f.text_field :name, :class => 'span3' %>
#   <%= f.text_area :description, :class => 'span3' %>
#   <%= f.jquery_datetime_select :start_time, :class => 'span3' %>
#   <%= f.jquery_datetime_select :end_time, :class => 'span3' %>
#   <%= f.check_box :all_day, { :label => 'Agree?, :description => 'left hand label'' } %>
#   <%= f.text_field :tag_string, :label_options => { :text => 'Tags' }, :class => 'span3' do %>
#     <p class="help-block">Use commas to separate tags.</p>
#   <% end %>
#   <div class="form-actions">
#     <%= f.submit 'Save', :class => 'btn btn-primary' %>
#     <%= link_to 'Cancel', calendar_entries_path, :class => 'btn' %>
#   </div>
# <% end %>
#
# Inline help:
# <%= f.text_field :name, :help => "inline help message"
#
module BootstrapFormBuilder
  module FormHelper
    [:form_for, :fields_for].each do |method|
      module_eval do
        define_method "bootstrap_#{method}" do |record, *args, &block|
          # add the TwitterBootstrap builder to the options
          options           = args.extract_options!
          options[:builder] = BootstrapFormBuilder::FormBuilder

          if method == :form_for
            options[:html] ||= {}
            options[:html][:class] ||= 'form-horizontal'
          end

          # call the original method with our overridden options
          send method, record, *(args << options), &block
        end
      end
    end
  end

  class FormBuilder < ActionView::Helpers::FormBuilder
    include FormHelper
    include ActionView::Helpers::TagHelper

    def get_error_text(object, field, options)
      if object.nil? || options[:hide_errors]
        ""
      else
        errors = object.errors[field.to_sym]
        if errors.empty? then "" else errors.first end
      end
    end

    def get_object_id(field, options)
      object = @template.instance_variable_get("@#{@object_name}")
      return options[:id] || object.class.name.underscore + '_' + field.to_s
    end

    def get_label(field, options)
      labelOptions = {:class => 'control-label'}.merge(options[:label_options] || {})
      text = options[:label] || labelOptions[:text] || nil
      options.delete(:label)
      options.delete(:label_options)
      labelTag = label(field, text, labelOptions)
    end

    def inline_help(options)
      return "" unless options[:help]
      text = options[:help]
      options.delete(:help)
      content_tag :span, text, :class => 'help-inline'
    end

    def submit(value, options = {}, *args)
      super(value, {:class => "btn btn-primary"}.merge(options), *args)
    end

    def jquery_date_select(field, options = {})
      id = get_object_id(field, options)
      
      date = 
        if options['start_date']
          options['start_date']
        elsif object.nil?
          Date.now
        else
          object.send(field.to_sym)
        end

      date_picker_script = "<script type='text/javascript'>" +
            "$( function() { " +
              "$('##{id}')" +
              ".datepicker( $.datepicker.regional[ 'en-NZ' ] )" +
              ".datepicker( 'setDate', new Date('#{date}') ); } );" +
          "</script>"
      return basic_date_select(field, options.merge(javascript: date_picker_script))
    end

    def basic_date_select(field, options = {})
      placeholder_text = options[:placeholder_text] || ''
      id = get_object_id(field, options)

      errorText = get_error_text(object, field, options)
      wrapperClass = 'control-group' + (errorText.empty? ? '' : ' error')
      errorSpan = if errorText.empty? then "" else "<span class='help-inline'>#{errorText}</span>" end
      
      labelTag = get_label(field, options)

      date = 
        if options[:start_date]
          options[:start_date]
        elsif object.nil?
          Date.now.utc
        else
          object.send(field.to_sym)
        end

      javascript = options[:javascript] || 
        "
  <script>
    $(function() { 
      var el = $('##{id}');
      var currentValue = el.val();
      if(currentValue.trim() == '') return;
      el.val(new Date(currentValue).toString('dd MMM, yyyy'));
    });
  </script>"

      ("<div class='#{wrapperClass}'>" + 
        labelTag +
        "<div class='controls'>" +
          super_text_field(field, {
            :id => id, :placeholder => placeholder_text, :value => date.to_s,
            :class => options[:class]
          }.merge(options[:text_field] || {})) + 
          errorSpan +
          javascript +
        "</div>" +
      "</div>").html_safe
    end

    def jquery_datetime_select(field, options = {})
      id = get_object_id(field, options)
      
      date_time = 
        if options['start_time']
          options['start_time']
        elsif object.nil?
          DateTime.now.utc
        else
          object.send(field.to_sym)
        end

      datetime_picker_script = "<script type='text/javascript'>" +
            "$( function() { " +
              "$('##{id}')" +
              ".datetimepicker( $.datepicker.regional[ 'en-NZ' ] )" +
              ".datetimepicker( 'setDate', new Date('#{date_time}') ); } );" +
          "</script>"
      return basic_datetime_select(field, options.merge(javascript: datetime_picker_script))
    end

    def basic_datetime_select(field, options = {})
      placeholder_text = options[:placeholder_text] || ''
      id = get_object_id(field, options)

      errorText = get_error_text(object, field, options)
      wrapperClass = 'control-group' + (errorText.empty? ? '' : ' error')
      errorSpan = if errorText.empty? then "" else "<span class='help-inline'>#{errorText}</span>" end
      
      labelTag = get_label(field, options)

      date_time = 
        if options[:start_time]
          options[:start_time]
        elsif object.nil?
          DateTime.now.utc
        else
          object.send(field.to_sym)
        end

      javascript = options[:javascript] || 
        "
  <script>
    $(function() { 
      var el = $('##{id}');
      var currentValue = el.val();
      if(currentValue.trim() == '') return;
      el.val(new Date(currentValue).toString('dd MMM, yyyy HH:mm'));
    });
  </script>"

      ("<div class='#{wrapperClass}'>" + 
        labelTag +
        "<div class='controls'>" +
          super_text_field(field, {
            :id => id, :placeholder => placeholder_text, :value => date_time.to_s,
            :class => options[:class]
          }.merge(options[:text_field] || {})) + 
          errorSpan +
          javascript +
        "</div>" +
      "</div>").html_safe
    end

    basic_helpers = %w{text_field text_area select email_field password_field number_field}

    multipart_helpers = %w{date_select datetime_select}
    
    trailing_label_helpers = %w{check_box}

    basic_helpers.each do |name|
      # First alias old method
      class_eval("alias super_#{name.to_s} #{name}")

      define_method(name) do |field, *args, &help_block|
        options = args.last.is_a?(Hash) ? args.last : {}
        object = @template.instance_variable_get("@#{@object_name}")

        labelTag = get_label(field, options)

        errorText = get_error_text(object, field, options)

        wrapperClass = 'control-group' + (errorText.empty? ? '' : ' error')
        errorSpan = if errorText.empty? then "" else "<span class='help-inline'>#{errorText}</span>" end 
        ("<div class='#{wrapperClass}'>" +
            labelTag + 
            "<div class='controls'>" + 
              super(field, *args) +
              inline_help(options) +
              errorSpan +
              (help_block ? @template.capture(&help_block) : "") +
            "</div>" +
          "</div>"
        ).html_safe
      end
    end  
    
    multipart_helpers.each do |name|
      define_method(name) do |field, *args, &help_block|
        options = args.last.is_a?(Hash) ? args.last : {}
        object = @template.instance_variable_get("@#{@object_name}")

        labelTag = get_label(field, options)

        options[:class] = 'inline ' + options[:class] if options[:class]
        
        errorText = get_error_text(object, field, options)

        wrapperClass = 'control-group' + (errorText.empty? ? '' : ' error')
        errorSpan = if errorText.empty? then "" else "<span class='help-inline'>#{errorText}</span>" end 
        ("<div class='#{wrapperClass}'>" +
            labelTag + 
            "<div class='controls'>" + 
                super(field, *args) +
                inline_help(options) +
                errorSpan +
                (help_block ? @template.capture(&help_block) : "") +
            "</div>" +
          "</div>"
        ).html_safe
      end
    end

    trailing_label_helpers.each do |name|
      # First alias old method
      class_eval("alias super_#{name.to_s} #{name}")

      define_method(name) do |field, *args, &help_block|
        options = args.first.is_a?(Hash) ? args.first : {}
        object = @template.instance_variable_get("@#{@object_name}")

        labelOptions = {:class => 'checkbox'}.merge(options[:label_options] || {})
        labelOptions["for"] = "#{@object_name}_#{field}"
        label_text = options[:label] || labelOptions[:text] || field.to_s.capitalize
        options.delete(:label)
        options.delete(:label_options)

        errorText = get_error_text(object, field, options)

        wrapperClass = 'control-group' + (errorText.empty? ? '' : ' error')
        errorSpan = if errorText.empty? then "" else "<span class='help-inline'>#{errorText}</span>" end 
        description = if options[:description] then %{<label class="control-label">#{options[:description]}</label>} else "" end
        options.delete(:description)
        ("<div class='#{wrapperClass}'>" +
          description +
          "<div class='controls'>" + 
            tag(:label, labelOptions, true) +
              super(field, *args) +
              inline_help(options) +
              errorSpan +
              (help_block ? @template.capture(&help_block) : "") +
              label_text +
            "</label>" +
            "</div>" +
          "</div>"
        ).html_safe
      end
    end
  end
end

allard - I made a fork, and documented my changes at the of the file.

The main thing I accomplished is that it now works with f.collection_select(). I also refactored the bootstrap html wrapping out to some new handler methods, because it was beginning to have some redundant code now that more controls are being supported.

See my fork here: https://gist.github.com/3206827