如何顯示內聯驗證錯誤而不是頁面頂部

Question

我想讓我的用戶模型驗證錯誤與其相應的表單域內聯顯示。我正在使用bootstrap和設計。我有客戶端驗證，所以它不會讓你提交註冊表單，直到大多數驗證滿足。問題是當用戶通過omniauth註冊Facebook時。 Omniauth將採用Facebook提供給我的字段，並將這些字段用於用戶，但Facebook未提供的字段將在頁面頂部引發難看的錯誤。我一直在試圖找到一種方法讓這些內聯顯示。

這是我的用戶型號：

class User < ActiveRecord::Base 

    has_many :bills, :dependent => :destroy 

    validates :cell_phone, presence: true 
    validates :cell_phone, length: { is: 10 } 
    validates :cell_phone, :numericality => {:only_integer => true} 
    validates :first_name, presence: true 
    validates :last_name, presence: true 
    validates :terms, presence: true 

    geocoded_by :last_sign_in_ip 
    after_validation :geocode 


    # Include default devise modules. Others available are: 
    # :confirmable, :lockable, :timeoutable and :omniauthable 
    devise :database_authenticatable, :registerable, :omniauthable, 
    :recoverable, :rememberable, :trackable, :validatable 



    def ability 
    @ability ||= Ability.new(self) 
    end 

    delegate :can?, :cannot?, :to => :ability 



    def self.from_omniauth(auth) 
     where(auth.slice(:sprovider, :uid)).first_or_create do |user| 
      user.sprovider = auth.provider 
      user.uid = auth.uid 
      user.first_name = auth.info.first_name 
      user.last_name = auth.info.last_name 
      user.email = auth.info.email 
      user.cell_phone = auth.info.cell_phone 
      user.avatar = auth.info.image 
     end 
    end 

這是我想內嵌錯誤出現在色器件註冊表格：

<div class="row sign_in"> 
    <div class="col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4"> 


    <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %> 
    <%= devise_error_messages! %> 


    <div class="row"> 
    <div class="form-group"> 
     <div class="col-md-6"> 
     <%= f.text_field :first_name, autofocus: true , class:'form-control',placeholder:'First Name *' , :required => true %> 
     </div> 

     <div class="col-md-6"> 
     <%= f.text_field :last_name, class:'form-control',placeholder:'Last Name*' , :required => true %> 
     </div> 
    <div class="row"> 
    </div> 
    </div> 
</div> 
    <div class="form-group"> 
     <%= f.phone_field :cell_phone, class:'form-control',placeholder:'Mobile Number*(Solely for notification purposes)', :required => true, :maximum => 10, :minimum => 10 %> 
    </div> 

    <div class="form-group"> 
     <%= f.email_field :email, class:'form-control',placeholder:'Email*', :required => true %> 
    </div> 

    <% if f.object.password_required? %> 
    <div class="form-group"> 
     <% if @validatable %><i></i><% end %> 
     <%= f.password_field :password, autocomplete: "off", class:'form-control',placeholder:'Password* (8 characters minimum)', id:"myPassword", :required => true %> 
    </div> 

    <div class="form-group"> 
     <%= f.password_field :password_confirmation, autocomplete: "off", class:'form-control',placeholder:'Password Confirmation*', :required => true %> 
    </div> 
    <% end %> 
    <div class="form-group"> 
    <%= f.check_box :terms%> 
    I have read and agreed the User 

<a href="#" data-toggle="modal" data-target=".bs-example-modal-sm">Terms and Conditions</a> 
     <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> 
      <div class="modal-dialog modal-md"> 
      <div class="modal-content"> 
       <p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium libero eget posuere ornare. Donec rutrum augue eu erat fringilla posuere. Aenean tempus dui a erat facilisis posuere. Pellentesque eget nulla et turpis mollis egestas. Donec molestie consequat ultricies. Vivamus in feugiat risus. Ut a quam id sapien fringilla efficitur eget in justo. Suspendisse tincidunt libero metus. Sed ultrices auctor diam mattis pretium. Integer in aliquam dui. Praesent pulvinar ante non urna consectetur, eget porta lorem porta. Etiam ac orci pretium, faucibus neque vel, egestas velit. Nullam condimentum ultrices imperdiet. Maecenas vel nisi commodo, bibendum purus dapibus, porttitor felis. 

Nullam nec porta lectus. Vivamus porta lobortis justo, sed cursus arcu tincidunt et. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque a rhoncus tellus. Ut mollis orci quis lacus consequat, quis varius nunc auctor. Ut elit ligula, bibendum quis mauris a, ornare elementum dui. Phasellus commodo ipsum eu augue consequat porta.</p> 
      </div> 
      </div> 
     </div> 
     </div> 

    <div><i class="icon-heart"></i></div> 
    <%= f.submit 'Sign up', class:'btn btn-primary btn-block' %> 

     <% end %> 

    </div> 
</div> 
</body> 
</html> 

這與Facebook的按鈕符號：

<div><i class="icon-heart"></i></div> 
    <%= f.submit 'Sign in', class:'btn btn-primary btn-block' %> 
    <%= link_to "Sign in with facebook", user_omniauth_authorize_path(:facebook), class:'btn btn-primary btn-block' %> 
    <br> 
    <div align="center"> 
</div> 

任何有關如何去顯示這些驗證錯誤的幫助，非常感謝。由於

Answer 1

你可以嘗試添加條件驗證，即不會驗證某些屬性，當Facebook的帳號存在（這意味着用戶在填寫報名表臉譜）

validates :first_name, presence: true, if: Proc.new {|u| u.facebookid.nil? } 

關於在表單中的錯誤，您可以擺脫顯示所有錯誤的頂部，並使用

<%= user.errors[:first_name] %> 

而不是您的字段。你總是可以通過做

object.errors[:attributename] 

Answer 2

可以訪問屬性（表單字段）錯誤，你可以使用simple_form_for而不是form_for如果使用簡單形式的寶石。 simple_form_for將自動顯示內聯錯誤消息。

寶石read me here。

如果您想顯示完整的錯誤消息，請點擊此鏈接Display inline errors with simple_form in a Bootstrap Ajax modal。希望這可以幫助你！

Answer 3

我們以前在這裏實現了這一點：http://firststopcosmeticshop.co.uk（點擊 「註冊」）

我們做它實際上是非常簡單的方式：

---

錯誤

每個錯誤你從模型顯示將不得不在@object.errors散列中定義。

而不是在你的頁面的頂部顯示的錯誤，你就真正能夠手動循環哈希，並顯示錯誤&符合形式上顯示它們：

#app/views/devise/registrations/new.html.erb 
<%= form_for ........ do |f| %> 
    <%= f.email_field :email %> 
    <%= devise_resource.errors[:email].first if devise_resource.errors[:email].present? %> 
    <%= f.submit %> 
<% end %> 

顯然是一個非常簡單的例子，但正如你所看到的，如果它存在，你將能夠在輸入中顯示錯誤。這個代碼有點舊（可能不是devise_resource） - 無論哪種方式，我們發現最好的方法是隻顯示你想要的錯誤，如上