如何显示内联验证错误而不是页面顶部

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） - 无论哪种方式，我们发现最好的方法是只显示你想要的错误，如上