Jak zmienić domyślny błąd błędu ranki div "field_with_errors"

Question

Używam do uwierzytelniania sorcery wraz z twitter bootstrap.

Chciałbym nadać stylu moim komunikatom o błędach w moim formularzu rejestracyjnym w stylu bootstrapu Twittera, zmieniając domyślne tory <div class="field_with_errors">, które zostaną dodane do DOM.

Co to jest konwencja szyn do robienia czegoś takiego?

Przypuszczam, że można dodać trochę javascript, który manipuluje DOM, aby zmienić nazwę <div class="field_with_errors">, ale to wydaje się hack. Wygląda na to, że powinien istnieć sposób obejścia tego w szynach, ale nie wiem, gdzie to zrobić.

ten sposób bootstrap wymaga, aby oznaczyć swój błąd korzystania z wbudowanego w stylach błędach forma:

<div class="control-group error"> 
    <label class="control-label" for="inputError">Input with error</label> 
    <div class="controls"> 
    <input type="text" id="inputError"> 
    <span class="help-inline">Please correct the error</span> 
    </div> 
</div> 

Answer 1

z linku powyżej, jeśli umieścić następujące wewnątrz class Application < Rails::Application z config/application.rb

config.action_view.field_error_proc = Proc.new { |html_tag, instance| 
    "<div class=\"field_with_errors control-group error\">#{html_tag}</div>".html_safe 
} 

Twoje znaczniki wejściowe będą miały czerwony znacznik wokół nich, gdy walidacja się nie powiedzie

Answer 2

W przypadku Bootstrap 3.2 możesz użyć czegoś. tak (dodaj nokogiri gem do Gemfile):

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

    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 = %(<div class="control-group has-error">#{e}</div>).html_safe 
    elsif form_fields.include? e.node_name 
     if instance.error_message.kind_of?(Array) 
     html = %(<div class="control-group has-error">#{html_tag}<span class="help-block">&nbsp;#{instance.error_message.uniq.join(', ')}</span></div>).html_safe 
     else 
     html = %(<div class="control-group has-error">#{html_tag}<span class="help-block">&nbsp;#{instance.error_message}</span></div>).html_safe 
     end 
    end 
    end 
    html 
end 

Umieść ten kod wewnątrz config/initializers/field_error_proc.rb pliku (stworzyć jeden, jeśli nie istnieje)

to nieco zmodyfikowany kod z: Overriding ActionView::Base.field_error_proc in Rails

Answer 3

pamiętać, że jeśli używasz SimpleForm, zaakceptowana odpowiedź użycia Proc w application.rb nie będzie działać. Zamiast tego należy edytować inicjator simple_form. Na przykład przy użyciu Bootstrap 3.2:

config.wrappers :default, class: :input, 
    hint_class: :field_with_hint, error_class: :'has-error' do |b| 
    [...] 
    b.use :hint, wrap_with: { tag: :span, class: :'text-warning' } 
    b.use :error, wrap_with: { tag: :span, class: :'text-danger' } 
end 

Answer 4

Twitter Bootstrap 3.3.6 on Rails 5, to idzie do inicjowania customize_error.rb i pracuje dla mnie:

ActionView::Base.field_error_proc = proc { |html_tag, _instance| "<div class=\"has-error\">#{html_tag}</div>".html_safe }