Validation inside input fields Rails bootstrap simple_form

1
votes

Respected ppl ...

Im using twitter bootstrap and simple_form in my rails app ... i need to get the error messages in the input field instead of it being displayed on the side ... like the image shown below....

enter image description here

How do i do this ...

My form is as follows 

    <div class="row-fluid">
      <div class="span6 offset3 centered">
        <%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
        <%= f.error_notification %>
        <div class="form-inputs">
          <%= f.input :name, required: true, autofocus: true, wrapper: :prepend, error: true, wrapper_html: { class: 'input-error' } do %>
            <span class="add-on"><i class="ss-icon ss-user"></i></span>
            <%= f.input_field :name, placeholder: "Full Name" %>
          <% end %>
          <%= f.input :email, required: true, required: true, wrapper: :prepend, error: true, wrapper_html: { class: 'input-error' } do %>
            <span class="add-on"><i class="ss-icon ss-mail"></i></span>
            <%= f.input_field :email, placeholder: "Email" %>
          <% end %>
          <%= f.submit "Sign up", class: "btn btn-primary sign" %>
        </div>
        <% end %>
      </div>
    </div>

Thanks ...

2
cssruby-on-railsvalidationtwitter-bootstrapsimple-form
The idea which i had was to replace the placeholder with the error message which is being rendered by bootstrap ... but i dont know how to do that .... – SkyKOG
Did you figure this out in the end? I'd like to know how if so. – stephenmurdoch

2 Answers

0
votes

model.errors contains all the information about validation errors. this code can put the error message inside the input field as you asked. Just some thoughts that I hope can help you come up with a solution.

<%= f.input_field :email, :placeholder => "Email", value: (resource.errors.include?(:email) ? resource.errors.get(:email).join(', ') : resource.email ) %>

resource.errors.include?(:email) tells you whether email attribute got errors and resource.errors.get(:email) returns an array of error message.

Also you will need to disable the auto generated inline error message that attached at the end of the error field, a span with a class name of 'help-inline'

0
votes

Try this to use bootstrap is-invalid

<div class="form-group row">
      <%= form.label :email, class: 'col-md-3 col-form-label'  %>
      <div class="col-md-9">
          <%= form.text_field :email, class: 'form-control' + (admin.errors.include?(:email) ? ' is-invalid' : '') %>
      </div>
  </div>