使用rails + nokogiri格式化引導程序的表單字段

Question

我在使用Twitter引導程序的rails應用程序的初始化程序中具有以下內容，以便在字段上的驗證失敗時刪除rails應用的div.field_with_errors，而且初始值設定程序將幫助/錯誤的輸入域後，確認文本：

require 'nokogiri' 
ActionView::Base.field_error_proc = Proc.new do |html_tag, instance| 
    html = %(<div class="field_with_errors">#{html_tag}</div>).html_safe 

    form_fields = [ 
    'textarea', 
    'input', 
    'select' 
    ] 

    elements = Nokogiri::HTML::DocumentFragment.parse(html_tag).css("label, " + form_fields.join(', ')) 

    elements.each do |e| 
    if e.node_name.eql? 'label' 
     html = %(#{e}).html_safe 
    elsif form_fields.include? e.node_name 
     if instance.error_message.kind_of?(Array) 
     html = %(#{e}<span class="help-inline">&nbsp;#{instance.error_message.join(',')}</span>).html_safe 
     else 
     html = %(#{e}<span class="help-inline">&nbsp;#{instance.error_message}</span>).html_safe 
     end 
    end 
    end 
    html 
end 

這工作得很好，但我還需要將.error類適用於周圍div.control-group爲每個錯誤。

我初始化當前給出了以下的輸出：

<div class="control-group"> 
    <label class="control-label" for="post_message">Message</label> 
    <div class="controls"> 
     <input id="post_message" name="post[message]" required="required" size="30" type="text" value="" /><span class="help-inline">&nbsp;can't be blank</span> 
    </div> 
</div> 

，但我需要的東西添加到我的初始化，使其增加了.error類的div.control-group像這樣：

<div class="control-group error"> 
    <label class="control-label" for="post_message">Message</label> 
    <div class="controls"> 
     <input id="post_message" name="post[message]" required="required" size="30" type="text" value="" /><span class="help-inline">&nbsp;can't be blank</span> 
    </div> 
</div> 

該解決方案將可能需要考慮到以下事實：每個驗證錯誤可能有多個標籤和輸入都在同一個div.control-group之內（例如，單選按鈕/複選框/ 2個文本字段並排） 。

我認爲它需要某種e.at_xpath()找到div.control-group家長，並添加.error類，但我不知道如何做到這一點。

任何人都可以幫忙嗎？

PS這可能都是可能的使用formtastic或simple_form寶石，但我寧願只是使用我自己的html，如果可能的話。

---

編輯

如果我把e['class'] = 'foo'在if e.node_name.eql? 'label'部分則應用類的標籤，所以我想我只是需要找到e父標籤，然後申請一個.error類，但我無法弄清楚xpath將從標籤到其父母div.control-group獲得什麼;沒有點，斜槓或似乎工作的任何組合，但xpath不是我的強項。

Answer 1

我已經管理它了。

根據這個蘇答案是不可能的：Rails - ActionView::Base.field_error_proc moving up the DOM tree?

所以，這裏是我所做的：

1. 刪除默認軌誤差從標籤和輸入
2. 包裝每個錯誤的標籤處理然後使用span.field_with_errors
3. .field_with_errors然後擴展.control-group。使用SASS

config/initializers/bootstrap.rb

require 'nokogiri' 

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance| 
    html = %(<div class="field_with_errors">#{html_tag}</div>).html_safe 

    form_fields = [ 
    'textarea', 
    'input', 
    'select' 
    ] 

    elements = Nokogiri::HTML::DocumentFragment.parse(html_tag).css("label, " + form_fields.join(', ')) 

    elements.each do |e| 
    if e.node_name.eql? 'label' 
     # wrap erroneous label 
     html = %(<span class='field_with_errors'>#{e}</span>).html_safe 
    elsif form_fields.include? e.node_name 
     # wrap erroneous field 
     if instance.error_message.kind_of?(Array) 
     html = %(<span class='field_with_errors'>#{e}<span class="help-inline">&nbsp;#{instance.error_message.join(',')}</span></span>).html_safe 
     else 
     html = %(<span class='field_with_errors'>#{e}<span class="help-inline">&nbsp;#{instance.error_message}</span></span>).html_safe 
     end 
    end 
    end 
    html 
end 

assets/stylesheets/application.css.scss

.field_with_errors { 
    @extend .control-group.error; 
} 

希望幫助別人錯誤的CSS。

Answer 2

不是最佳的解決方案，但因爲我是一個有效的解決方法更多的HTML/JS傢伙比Rails

- >使用jQuery選擇& addClass http://api.jquery.com/contains-selector/ http://api.jquery.com/addClass/

$("div.control-group:contains('can\\'t be blank')").addClass("error"); 

Answer 3

如果您不需要顯示錯誤消息旁邊錯誤的領域，那麼你可以簡單地添加以下assets/stylesheets/application.css.scss：

.field_with_errors { 
    @extend .control-group.error; 
    display: inline; 
}