Setting up Fehlermeldung, die html-Ansicht in dieser Weise?

Question

Ich bin mit Twitter-Bootstrap und generieren möchten die richtige html-Anzeige der Fehler-Ansicht, wie Sie es tut auf der Haupt-Website, die:

Der html-Code für den oben genannten Bereich ist:

<div class="control-group error">
 <label for="inputError" class="control-label">Input with error</label>
  <div class="controls">
   <input type="text" id="inputError">
  </div>
</div>

Hinweis:Ich gelöscht Please correct the error, <span>, Ich will nur das Eingabefeld und Beschriftung.

Und wenn ich meine Anmeldeseite als ein Beispiel, die email Feld, wäre es:

<div class="control-group">
 <label for="user_email" class="control-label">Email*</label>
  <div class="controls">
   <input type="email" value="" name="user[email]" id="user_email" class="span3">
  </div>
</div>

Was muss ich tun, um es zu Funktion wie die ehemaligen?

Answer 1

Erfinden Sie das Rad nicht erneut. Verwenden einfache Form. Mit der aktuellen Version des Gems können Sie Folgendes tun:

rails generate simple_form:install --bootstrap

Damit können Sie die Helpers Simple_form verwenden. Sie werden die richtigen Dinge für Sie erzeugen.

Answer 2

Ich habe gerade auf dieses Problem und habe es behoben mit einer einfachen änderung der Bootstrap-CSS.

Meine übliche Feld-code:

<div class="control-group">
    <%= f.label :fieldname, t('models.model.fieldname'), :class => "control-label" %>
    <div class="controls">
        <%= f.text_field :fieldname, :class => 'input-large' %>
    </div>
</div>

Da bin ich mit f.label und f.text_field das label und input sind beide gekapselt mit divs mit der field_with_errors Klasse (als Nikolaus erwähnt), so dass der resultierende HTML-Code:

<div class="control-group">
    <div class="field_with_errors"><label class="control-label" for="model_fieldname">Field name</label></div>
    <div class="controls">
        <div class="field_with_errors"><input class="input-large" id="model_fieldname" name="model[fieldname]" size="30" type="text" value=""></div>
    </div>
</div>

Um diese haben die gleiche Aussehen Aussehen wie Bootstrap ' s <div class="control-group error"> Stil, den ich fügen Sie einige zusätzliche Selektoren in bootstrap.css.Ich finde sämtliche Verweise auf .control-group.error ... hinzufügen und duplizieren von Linien mit .control-group .field_with_errors ....So Ende ich mit dieser Sache:

.control-group.error > label,
.control-group.error .help-block,
.control-group.error .help-inline,
.control-group .field_with_errors > label,
.control-group .field_with_errors .help-block,
.control-group .field_with_errors .help-inline {
  color: #b94a48;
}

Es ist vielleicht nicht die eleganteste Art, es zu tun für Schienen, aber mir schien es viel einfacher als mehr abhängig Edelsteine oder Aufhebung der Fehler bei der Verarbeitung.Ja, Sie haben die gleichen änderungen jedes mal, wenn Sie aktualisieren, Bootstrap, aber Sie sind ziemlich einfach verpasst, und man konnte wohl bei einer patch-Datei, um es automatisch zu tun.

Answer 3

Rails generiert automatisch eine DIV mit der Klasse field_with_errors Wenn eine Fehlermeldung angezeigt wird. Das DIV wickelt das Element mit einem Fehler. Um es anzupassen, können Sie diese Zeile hinzufügen application.rb:

config.action_view.field_error_proc = Proc.new { |html_tag, instance| %Q(<div class="field_with_errors">#{html_tag}</div>).html_safe }

Dies ist die Standardeinstellung. Um die gleiche Struktur wie Twitter Bootstrap zu erhalten, können Sie damit spielen.

html_tag ist ein Platzhalter für das Feld mit Fehlern, z. B. <input name="model[attribute]" size="30" type="text" value="">

Sie können dies in ein anderes DIV einwickeln und auch eine Spannweite hinzufügen, in der er mit der Aufschrift "Bitte korrigieren Sie den Fehler" hin.

Mehr Info: http://guides.rubyonrails.org/configuring.html - Punkt 3.9