Flask - wtforms: Validation always false

Question

First, I'm new to python and Flask, so I'm sorry if my question is dumb. I search it but never found an answer (which should be an "easy" one I guess).

I wanted to add a contact page in my website, I found this tutorial so I followed it. Everything worked fine until the forms validation. I only use Required and form.validate() always returned false. If I don't touch my code, and I remove every Required in the form class, it works fine, form.validate() returns true.

I don't really understand why, I read a lot that validate_on_submit() should be used, but I'm getting an error if I use it: *'ClassName' object has no attribute 'validate_on_submit'*

Here's the relevant parts of the code:

Index.py

@app.route('/contact', methods=['GET','POST'])
def contact():
form = ContactForm()

if request.method == 'POST':
    if form.validate() == False:
        flash('All Fields are required.')
        return render_template('contact.html', form=form)
    else:
        return 'Form posted'
elif request.method == 'GET':
    return render_template('contact.html', form=form)

forms.py

from wtforms import Form, TextField, TextAreaField, SubmitField, validators,ValidationError 

class ContactForm(Form):
  name = TextField("Name", [validators.Required()])
  email = TextField("Email")
  subject = TextField("Subject")
  message = TextAreaField("Message")
  submit = SubmitField("Send")

contact.html

<div id="contact">
    {% for message in get_flashed_messages() %}
        <div class="flash">{{ message }}</div>
    {% endfor %}
  <form action="{{ url_for('contact') }}" method=post>

    {{ form.name.label }}
    {{ form.name }}

    {{ form.email.label }}
    {{ form.email }}

    {{ form.subject.label }}
    {{ form.subject }}

    {{ form.message.label }}
    {{ form.message }}

    {{ form.submit }}
  </form>
 </div>

I never got the "Form posted" string even when I write something in the Name field.

Thanks in advance,

Answer 1

I always fail the form.validate_on_submit() when I am testing the login form following the demo code in Miguel Grinberg's book "Flask Web Development". So I think I should find a way to debug.

The debug approach I am taking is adding the code below to the app/auth/views.py:

flash(form.errors)

Then it shows me the culprit when I run to the login page:

errors={'csrf_token': ['CSRF token missing']}

So I recommend to use form.errors message to debug.

Answer 2

You have to initialize the form instance with values from the request:

from flask import request

@app.route('/contact', methods=['GET','POST'])
def contact():
    form = ContactForm(request.form)
    if request.method == "POST" and form.validate():
        # do something with form
        # and probably return a redirect
    return render_template("contact.html", form=form)

Here's a better tutorial than the one you link in your question: http://flask.pocoo.org/docs/patterns/wtforms/.

Have a look at the template rendering code in the tutorial, make sure you render the form field errors. If the form is posted but does not validate the code will fall through to render_template with the form instance containing field validation errors (again, see the tutorial and WTForms documentation for details).

Answer 3

Just encountered the issue, and the solution was to add hidden_tag right under the form in the template:

...
<form action="{{ url_for('contact') }}" method=post>
{{ form.hidden_tag() }}
...

Answer 4

As @Paul Vergeev, just add:

<form action="{{ url_for('contact') }}" method=post>
{{ form.csrf_token }}

This is required because your form includes validators hence adding an 'input' of type "Hidden" in your html form. Without this hidden token in your html, the validator cannot validate your users' inputs and the result of validation will always be False.

{{ form.hidden_tag() }}

will include all hidden inputs fields in your html code; but they will not be displayed on the page.

{{ form.csrf_token }}

will include just the hidden csrf_token input field in your html code; but they will not be displayed on the page.

One more thing to do: you must configure your app's SECRET_KEY. Do this by including app.config["SECRET_KEY"] = "a secret key you won't forget" just below the app initialization i.e. just after app = Flask(__name__).

All this is a way for WTForms validators to protect your site from CSRF(often pronounced as c-surf). You can also read more about CSRF here.