將引導驗證狀態實現到text_field

Question

我在ROR中構建一個表單，我想在text_field上使用bootstrap驗證狀態，但我不確定如何實現該功能？ 我對引導程序不是很好，所以我想我能看到我能不能在這里得到幫助。 為了清楚起見，我會展示我的表格和代碼。

形成

<label>
Name<br>
<div class="form-group has-error has-feedback">
<%= f.text_field :name %>
</div>
</label>

在這里，我已經在text_field周圍放置了div類，但是bootstrap如何知道驗證錯誤並將文本字段變為紅色？ 我試圖實現這一點

  <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>

這是在bootstrap文檔中，但我不知道如何使它在我的應用程序中工作

當名稱為空時，我希望文本字段看起來像這樣。

我希望這是足夠的信息？

Answer 1

此示例可能會有所幫助： http ： //formvalidation.io/examples/adding-warning-validation-state/

Answer 2

在Rails中，最簡單的方法是使用te gem bootstrap_form

安裝后你可以像這樣使用它

<%= bootstrap_form_for(@user) do |f| %>
  <%= f.text_field :name %>
  <%= f.submit "Log In" %>
<% end %>

希望這可以幫助

Answer 3

將您的錯誤放在app / views / layouts / application.html.erb中，高於yield和導航下。

<% if flash[:notice] %>
  <div class="alert alert-success">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <%= flash[:notice] %>
  </div>
<% elsif flash[:error] %>
  <div class="alert alert-danger">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <%= flash[:error] %>
  </div>
<% elsif flash[:alert] %>
  <div class="alert alert-warning">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <%= flash[:alert] %>
  </div>
<% end %>

在您的模型中，驗證表單

validates :title, length: { minimum: 5 }, presence: true

在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

在你的表格內

    <% 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 %>

確保你的控制器中也有正確的邏輯

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