ich bin derzeit dabei, eine kleine WebApp inklusive Userregistrierung mit Flask + Bootstrap + SQLAlchemy + wtforms zu schreiben.
Dazu nutze ich das render_field macro aus der wtforms Dokumentation.
Code: Alles auswählen
{% macro render_field(field) %}
<dt>{{ field.label }}
<dd>{{ field(**kwargs)|safe }}
{% if field.errors %}
<ul class=errors>
{% for error in field.errors %}
<li><b><font color="red">{{ error }}</font></b></li>
{% endfor %}
</ul>
{% endif %}
</dd>
{% endmacro %}
Code: Alles auswählen
{% extends "base.html" %}
{% block body %}
<h1>Sign Up</h1>
{% from "includes/_formhelpers.html" import render_field %}
<form method="POST" action="">
{{ form.hidden_tag() }}
<div class="form-group {% if form.errors %} has-error {% endif %}"> // Methode eins, Rahmen ist um die gesamte Gruppe, nicht nur um die Input Klasse
{{ render_field(form.name, class="form-control {% if form.errors %} has-error {% endif %}") }} // Methode zwei, Rahmen ist IMMER da
</div>
<div class="form-group">
{{ render_field(form.vorname, class="form-control") }}
</div>
<div class="form-group">
{{ render_field(form.username, class="form-control") }}
</div>
<div class="form-group">
{{ render_field(form.email, class="form-control") }}
</div>
<div class="form-group">
{{ render_field(form.password, class="form-control") }}
</div>
<div class="form-group">
{{ render_field(form.confirm, class="form-control") }}
</div>
<p><input type="submit" class="btn btn-primary" value="Sign Up"></p>
</form>
{% endblock %}
Das sieht derzeit wir folgt aus:
[img][IMG]http://fs5.directupload.net/images/1712 ... d9pro7.png[/img][/img]
Ich habe dazu die Datei mycss.css angelegt, mit folgendem Inhalt:
Code: Alles auswählen
.has-error {
border:solid red;
}
Das ganze funktioniert aber nur so halb.
Wenn ich (in meinem Register-Template hinter dem "form-group" Tag
Code: Alles auswählen
{% if form.errors %} has-error {% endif %}
[img][IMG]http://fs1.directupload.net/images/1712 ... q8qz2r.png[/img][/img]
Also dachte ich mir, dass es sinnvoller wäre, das if-statement hinter die einzelnen form-controls zu schreiben.
Wenn ich dort allerdings o.g. if-statement hinter schreibe, wird die rote Border immer gerendert, auch wenn kein validator anschlägt.
Sozusagen so, als hätte ich - anstelle des if-statements - einfach nur ein "has-error" hinter das "form-control" gepackt.
Das ganze sieht so aus:
[img][IMG]http://fs5.directupload.net/images/1712 ... aw4u7i.png[/img][/img]
Prinzipiell ist das letzte Bild schon das, was ich mir vom Style her vorstelle.
Allerdings halt nur, wenn der validator ein Feld als "falsch" markiert. Nicht immer.
Was mache ich bei der ganzen Sache falsch? Warum funktioniert das if-statement bei der form-group class, nicht aber bei der form-control class?
Liegt es daran, dass die render_field funktion als argument nur ein field nimmt und kein weiteres, und ich hier versuche, ein weiteres zu übergeben?
Oder habe ich meine .css Datei falsch angelegt?
Vielen Dank im Voraus!