Implementing bootstrap validation state to a text_field - html

Question

I'm building a form in ROR and I'd like to use a bootstrap validation state on the text_field but I'm unsure of how to implement the feature? I'm not great with bootstrap so I thought I see if I could get help on here. I'll show my form and my code for clarity.
FORM
<label>
Name<br>
<div class="form-group has-error has-feedback">
<%= f.text_field :name %>
</div>
</label>
Here I have already placed the div class around the text_field but how does bootstrap know when a validation is wrong and turn the text field red? Im trying to implement this
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
this is in the bootstrap docs but I'm not sure how to make it work in my app
I want the text field to look like this when name is blank.
I hope this is enough info?

Answer 1

Put your errors in your app/views/layouts/application.html.erb, above the yield and under your nav.
<% if flash[:notice] %>
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">×</button>
<%= flash[:notice] %>
</div>
<% elsif flash[:error] %>
<div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert">×</button>
<%= flash[:error] %>
</div>
<% elsif flash[:alert] %>
<div class="alert alert-warning">
<button type="button" class="close" data-dismiss="alert">×</button>
<%= flash[:alert] %>
</div>
<% end %>
within your model, validate the form
validates :title, length: { minimum: 5 }, presence: true
within app/helpers/application_helper.rb
def form_group_tag(errors, &block)
if errors.any?
content_tag :div, capture(&block), class: 'form-group has-error'
else
content_tag :div, capture(&block), class: 'form-group'
end
end
within your form
<% if post.errors.any? %>
<div class="alert alert-danger">
<h4>There are <%= pluralize(post.errors.count, "error") %>.</h4>
<ul>
<% post.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<%= form_group_tag(post.errors[:title]) do %>
<%= f.label :title %>
<%= f.text_field :title, class: 'form-control', placeholder: "Enter post title" %>
<% end %>
<%= form_group_tag(post.errors[:body]) do %>
<%= f.label :body %>
<%= f.text_area :body, rows: 8, class: 'form-control', placeholder: "Enter post body" %>
<% end %>
<div class="form-group">
<%= f.submit "Save", class: 'btn btn-success' %>
</div>
<% end %>
make sure you have the proper logic in your controller too
if #book.save
format.html { redirect_to #book, notice: 'Book was successfully created.' }
format.json { render :show, status: :created, location: #book }
else
format.html { render :new }
format.json { render json: #book.errors, status: :unprocessable_entity }
end

Answer 2

This example here might be helpful: http://formvalidation.io/examples/adding-warning-validation-state/

Answer 3

In Rails the easyest way to do it is using te gem bootstrap_form
after install it you can use it like this
<%= bootstrap_form_for(#user) do |f| %>
<%= f.text_field :name %>
<%= f.submit "Log In" %>
<% end %>
hope this helps