E-Mail-Feld:
<label for="job_client_email">Email: </label>
<input type="email" name="job[client_email]" id="job_client_email">
sieht aus wie das:
Wenn die E-Mail-Validierung jedoch fehlschlägt, wird Folgendes angezeigt:
<div class="field_with_errors">
<label for="job_client_email">Email: </label>
</div>
<div class="field_with_errors">
<input type="email" value="wrong email" name="job[client_email]" id="job_client_email">
</div>
das sieht so aus:
Wie kann ich diese Änderung des Erscheinungsbilds vermeiden?
ruby-on-rails
ruby-on-rails-3
validation
field-with-errors
Mischa Moroshko
quelle
quelle
Antworten:
Sie sollten überschreiben
ActionView::Base.field_error_proc
. Es ist derzeit wie folgt definiert inActionView::Base
:Sie können es überschreiben, indem Sie dies in die Klasse Ihrer Anwendung einfügen
config/application.rb
:Starten Sie den Rails-Server neu, damit diese Änderung wirksam wird.
quelle
label
als auch dieinput
verpackt? Wie entscheidet Rails, was verpackt werden soll?f.label :password
undf.password_field :password
in der@resource.errors
ein[:password]
Fehler auftreten würde .Der visuelle Unterschied, den Sie sehen, tritt auf, weil das
div
Element ein Blockelement ist. Fügen Sie diesen Stil Ihrer CSS-Datei hinzu, damit sie sich wie ein Inline-Element verhält:quelle
display:
Eigenschaften (und andere Layoutstile), die auf dem verwendet werden, negiert werdenhtml_tag
.display
Eigenschaft, die vor dem Hinzufügen dieses CSS verwendet wird,block
verursacht den visuellen Unterschied, der nicht erwünscht ist. Es werden keine anderen Layoutstile auf dem Tag negiert. Die Antwort von Ryan Bigg ist jedoch perfekt, wenn Sie das Tag ändern / entfernen möchten, das das Feld mit Fehlern umschließt.Ich verwende derzeit diese Lösung in einem Initialisierer:
Auf diese Weise kann ich dem entsprechenden Tag lediglich einen Klassennamen hinzufügen, ohne zusätzliche Elemente zu erstellen.
quelle
label
.Der zusätzliche Code wird von hinzugefügt
ActionView::Base.field_error_proc
. Wenn Siefield_with_errors
Ihr Formular nicht zum Stylen verwenden, können Sie es überschreiben inapplication.rb
:Alternativ können Sie es in etwas ändern, das zu Ihrer Benutzeroberfläche passt:
quelle
Ich arbeite mit Rails 5 und Materialise-Sass und bekomme einige Probleme mit dem Standardverhalten von Rails, um fehlgeschlagene Feldvalidierungen wie in der Abbildung unten zu behandeln. Dies lag an den zusätzlichen
div
Hinzufügungen zu den Eingabefeldern, in denen die Validierung fehlgeschlagen ist.Arbeiten mit der Antwort von @Phobetron und Ändern der Antwort von Hugo Demiglio. Ich habe einige Anpassungen an diesen Codeblöcken vorgenommen und in den folgenden Fällen funktioniert etwas gut:
input
und irgendwo einlabel
eigenesclass
Attribut hat<input type="my-field" class="control">
<label class="active" for="...">My field</label>
input
oderlabel
keinclass
Attribut haben<input type="my-field">
<label for="...">My field</label>
label
Tag ein anderes Tag mit dem enthältclass attribute
<label for="..."><i class="icon-name"></i>My field</label>
In all diesen Fällen wird die
error
Klasse zu den vorhandenen Klassen imclass
Attribut hinzugefügt, falls vorhanden, oder sie wird erstellt, wenn sie nicht in der Bezeichnung oder den Eingabe- Tags vorhanden ist.Ich hoffe, es könnte für jemanden mit den gleichen Bedingungen wie ich nützlich sein.
quelle
Zusätzlich zu @phobetron Antwort, die nicht funktioniert, wenn Sie ein anderes Tag mit Klassenattribut haben, wie
<label for="..."><i class="icon my-icon"></i>My field</label>
.Ich habe einige Änderungen an seiner Lösung vorgenommen:
quelle
Wenn Sie aus irgendeinem Grund immer noch an Rails 2 arbeiten (wie ich), lesen Sie den SO-Beitrag hier .
Es bietet ein Skript zum Einfügen von Initialisierern.
quelle
Eine Sache, die Sie beachten sollten (wie ich heute festgestellt habe), ist, dass wenn Sie entweder die Beschriftungs- oder die Eingabefelder schweben lassen (ich schwebe alle Eingabefelder nach rechts), das CSS die Gewinnschwelle überschreitet, wenn Sie ActionView :: überschreiben. Base.field_error_proc.
Eine Alternative besteht darin, die CSS-Formatierung wie folgt zu vertiefen:
quelle
Ich habe eine Option gewählt, um diese schreckliche Sache für einige Objekte zu deaktivieren
Kann es also so verwenden:
quelle
Dies ist meine Lösung, die auf der Antwort von @ Phobetron aufbaut. Wenn Sie diesen Code eingeben
application.rb
, erhalten Ihre<p>
und<span>
Tags, die durch die entsprechendenform.error :p
Aufrufe generiert wurden , dasfields_with_errors
CSS-Tag. Der Rest erhält dieerror
CSS-Klasse.Ich fand diesen Weg am flexibelsten und unauffälligsten, um die Antwort über meine Formulare hinweg zu gestalten.
quelle
Wenn es nur für Stylingzwecke ist (das macht Ihnen nichts aus
div
), können Sie dies einfach zu Ihrem CSS hinzufügen:Das
div
wird sich wie einspan
verhalten und Ihr Design nicht beeinträchtigen (dadiv
es sich um ein Blockelement handelt -display: block;
- wird standardmäßig nach dem Schließen eine neue Zeile verursacht;span
istinline
, also nicht).quelle
Wenn Sie nur Fehler für bestimmte Elemente deaktivieren möchten, z. B. Kontrollkästchen , können Sie Folgendes tun:
quelle
Wenn es nur um Stylingprobleme geht, können wir "field_with_errors" überschreiben. Da sich dies jedoch auf andere Formulare in unserer Anwendung auswirken kann, ist es besser, die Klasse "field_with_errors" nur in diesem Formular zu überschreiben.
Wenn man bedenkt, dass 'parent_class' eine der übergeordneten Klassen für das Fehlerfeld des Formulars ist (entweder die Klasse des Formulars oder die Klasse eines der übergeordneten Elemente für das Fehlerfeld)
Es wird das Problem beheben und auch keine anderen Formen in unserer Anwendung stören.
ODER
Wenn wir den Stil von "field_with_errors" für die gesamte Anwendung überschreiben müssen, dann, wie @dontangg sagte,
wird das Update machen. Ich hoffe es hilft :)
quelle
Wenn Sie nicht
field_error_proc
für Ihre gesamte Anwendung Änderungen vornehmen möchten, bietet jQuerys Unwrap eine gezieltere Lösung für bestimmte Problembereiche, z.quelle