Flask WTForms zum Anchor gehen, wenn Form nicht valid?
Ich habe ein Kontaktformular am Ende einer Webseite. Wenn ich das submitte und das Form ist valid, werde ich auf /contact weitergeleitet, der dann wieder auf / redirected und zum Anchor "contact-us" springt - soweit alles gut (vllt. aber auch nicht wirklich elegant)
@app.route("/", methods=['POST', 'GET'])
def index():
form = ContactForm()
if form.validate_on_submit():
send_mail(request.form)
return redirect('/contact')
return render_template('index.html', form=form)
#Redirect
@app.route('/contact')
def success():
form = ContactForm()
return redirect(url_for('index', _anchor='contact-us'))
Wenn das Form aber nicht valid ist, werde ich natürlich nicht weitergeleitet, aber die Seite wird durch das SubmitField neu geladen und ich bin wieder ganz oben. So weiß der User nicht, dass die Kontaktanfrage fehgeschlagen (Fehler, wie z.B invalid Email werden unter dem Input Field angezeigt), da er erstmal runterscrollen müsste.
Wie kann ich bei nicht valid nach dem Reload wieder zum Anchor springen? (Alert Window oder so für den Fehler möchte ich vermeiden)
Außerdem: Ich hätte gerne eine Nachricht unter dem Form, wenn es erfolgreich gesendet wurde. Kann ich beim Redirect ein Argument mitgeben, sodass ein Text eingeblendet wird oder gibt es dafür eine elegante Lösung? ^^
1 Antwort
1) Ergänze dein ContactForm-Objekt, welches du an das Template übergibst, einfach um ein boolsches Feld (error o.ä.). Im View renderst du den Wert auf dem Formular als Attribut:
<form data-has-error="{{form.error}}" ...>
Dann inkludierst du noch ein Skript (JS), welches im Fall, dass es einen Fehler gab, zu dem Element scrollt:
const target = document.querySelector("[data-has-error='True']");
if (target) {
target.scrollIntoView();
}
2) Kann es sein, dass dein gesamter Redirect unnötig ist, da du eh nur wieder auf dieselbe Seite (index) mit dem selben Formular verweist?
Wie im obigen Fall brauchst du dann eigentlich nur dein Formularobjekt erweitern (diesmal um eine success_message) und das Template:
{% if form.success_message != None %}
<p class="success">{{ form.success_message }}</p>
{% endif %}
Der Aufruf der redirect-Methode sowie die success-Funktion fliegen hingegen raus.