Update docs to explain simple_form with bootstrap

[efmiglioranza]

I've spent some hours trying to debug judge with simple_form and bootstrap form builder. The solution was to add b.use :judge at the config/initializers/simple_form_bootstrap.rb (and not the config/initializers/simple_form.rb).

Example:

# Use this setup block to configure all options available in SimpleForm.
SimpleForm.setup do |config|
  config.wrappers :bootstrap, tag: 'div', class: 'control-group', error_class: 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label
    b.use :judge
    b.wrapper tag: 'div', class: 'controls' do |ba|
      ba.use :input
      ba.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
    end
  end

Using ba.use :judge inside the wrapper block won't work too.

[Bsilvacs]

Hmm...I still can't get it to work. Here's my code:

_form.html.erb

<%= simple_form_for @moneda do |f| %>
    <%= f.error_notification %>
    <%= f.input :descripcion, :validate => true %>
    <%= f.input :clave, :validate => true %>
    <%= f.button :submit, 'Aceptar', :class => 'btn btn-primary' %>
    <%= link_to 'Cancelar',
                monedas_path, :class => 'btn btn-default' %>
<% end %>

simple_form_bootstrap

config.wrappers :vertical_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :judge
    b.optional :maxlength
    b.optional :pattern
    b.optional :min_max
    b.optional :readonly
    b.use :label, class: 'control-label'

    b.use :input, class: 'form-control'
    b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
    b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
  end

  config.default_wrapper = :vertical_form

moneda.rb

class Moneda < ActiveRecord::Base
  validates :descripcion, presence: true
  validates :clave, presence: true, uniqueness: { case_sensitive: false }
end

I don't see any kind of client side validation. Any ideas what I'm doing wrong?

[efmiglioranza]

Are you using another gem that modifies HTML attributes like ClientSideValidations?

Take a look at the generated HTML, there should be a data-validate hash like that:

data-validate="[{"kind":"presence","options":{},"messages":{"blank":"não pode ficar em branco"}},{"kind":"length","options":{"minimum":5},"messages":{"too_short":"é muito curto (mínimo: 5 caracteres)","blank":"não pode ficar em branco"}}]"

[Bsilvacs]

Hello efmiglioranza,

I do get the data-validate hash in my HTML output:

data-validate="[{"kind":"presence","options":{},"messages":{"blank":"can't be blank"}},{"kind":"format","options":{"with":"(?i-mx:\A[\w+-.]+@[a-z\d-]+(.[a-z]+)*.[a-z]+\z)"},"messages":{"invalid":"is invalid","blank":"can't be blank"}}]"

Yet I don't see any difference. These 2 lines:
<%= f.input :descripcion, :validate => true %>
<%= f.input :clave%>

Do exactly the same, even if one has validate and the other doesn't.

Thanks for the help!

[efmiglioranza]

Hi Bsilvacs.

if the HTML is ok, then it seems that the error is in the Javascript. Take a look at the loaded resources in your page and check if the judge.js is there (don't forget to include the files in the application.js if you are using the assets pipeline). Also, you can go to the Js console and type judge to see if the judge object is loaded:

Object {VERSION: "2.0.4", get: function, urlFor: function, enginePath: "/judge", Dispatcher: Object…}

If everything is ok, then there might be some error with the validations. Try to edit a field and see if there is some error in the console after the submit.

About the field without the validation generating the data-validate hash, it seems that there is another gem/form builder/etc. editing your HTML and conflicting with judge.

[deeTEEcee]

@efmiglioranza thx a lot for the issue post. is there anything else i should be wary about while im using judge with bootstrap and simple_form

[efmiglioranza]

Yes.. I've also struggled to make it work with the prepend and append icons of bootstrap. There is a solution available where you use it withing a block, something like that:

<% f.input :myfield, wrapper: :prepend do %>
  <span icon tag />
  <%= f.input_field :myfield %>
<% end %>

But it disables the components as :judge, :placeholder, etc. because you're using f.input_field instead of f.input for the field, and you can't use the b.use :input_field in the initializer.

So I ended up using it this way:

Create a new span component for simple_form:

# config/initializers/simple_form/span_component.rb
module SimpleForm
  module Components
    module Span

      def span(wrapper_options = nil)
        @span ||= begin
          "<span>#{options[:span]}</span>".html_safe
        end
      end

      def has_span?
        options[:span] != false && span.present?
      end
    end
  end
end

SimpleForm::Inputs::Base.send(:include, SimpleForm::Components::Span)

Configure the :prepend (and whatever you want) wrapper:

# config/initializers/simple_form_bootstrap.rb
config.wrappers :prepend, tag: 'div', class: "control-group", error_class: 'error' do |b|
  b.use :html5
  b.use :placeholder
  b.use :label
  b.use :judge
  b.wrapper tag: 'div', class: 'controls' do |input|
    input.wrapper tag: 'div', class: 'input-prepend' do |prepend|
      prepend.use :span, wrap_with: {class: 'add-on'}
      prepend.use :input
    end
    input.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }
    input.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
  end
end

Use it:

<%= f.input :price, wrapper: :prepend, span: 'R$', validate: true %>

Now you can use the prepend and append icons without disabling components. Hope it helps :)