Différences

Ci-dessous, les différences entre deux révisions de la page.

--- dev:python:flask:flask_formulaires_wtforms [2026/04/11 10:22] – yoann
+++ dev:python:flask:flask_formulaires_wtforms [2026/04/12 10:26] (Version actuelle) – yoann
@@ Ligne 1: / Ligne 1: @@
 {{tag>dev python flask web formulaire}}
-:TODO:
+:TODO_DOCUPDATE:
 ====== Flask : Créer des formulaires via Flask-WTF ======
@@ Ligne 140: / Ligne 140: @@
-===== filters =====
+===== Les filtres =====
-Les filtres permettent de traiter (en amont de la validation), les valeurs saisies par l'utilisateur. On les utilise couramment pour :
+Les filtres (filters) permettent de traiter, en amont de la validation, les valeurs saisies par l'utilisateur. On les utilise couramment pour :
   * Retirer les espaces en début et fin de saisie ;
   * Passer la saisie en majuscule, en minuscule ;
-  * Arrondir etc.
+  * Arrondir les valeurs décimales etc.
@@ Ligne 163: / Ligne 163: @@
 Ci-dessus, on utilise les filtres pour retirer les espaces autour de la saisie et la passer en majuscules.
-===== validators =====
+===== Les validateurs =====
 Les **validators** permettent de contrôler la saisie de l'utilisateur. On les importe depuis ''wtforms.validators''.
@@ Ligne 171: / Ligne 171: @@
 from flask_wtf import FlaskForm
 from wtforms import StringField
-from wtforms.validators import DataRequired, Email
+from wtforms.validators import InputRequired, Email
 class RegisterForm(FlaskForm):
-    email = StringField(label='Email', validators=[DataRequired(),Email()])
+    email = StringField(label='Email', validators=[InputRequired(),Email()])
 </code>
@@ Ligne 182: / Ligne 182: @@
   * La saisie doit respecter le formalisme d'un email.
-Dans ce cas, peut également utiliser l'objet EmailField :
+Dans ce cas, peut également utiliser la classe ''EmailField'' :
 <code python>
@@ Ligne 194: / Ligne 194: @@
 </code>
-Il existe de nombreux validators citons par exemple **DataRequired**, **Length**, **Email**, **URL**, **NumberRange**, **IPAddress**, **MacAddress**, **Regexp**, etc. Il est possible de définir ses propres validators.
+Il existe de nombreux validators citons par exemple **InputRequired**, **Length**, **Email**, **URL**, **NumberRange**, **IPAddress**, **MacAddress**, **Regexp**, etc. Il est possible de définir ses propres validators.
   * Ici la [[https://wtforms.readthedocs.io/en/3.2.x/validators/|documentation exhaustive des validators WTForms]]
-===== Validation =====
-C'est la fonction contrôleur qui se charge de valider le formulaire retourné en méthode POST
 ===== Rendu du formulaire dans le template =====
@@ Ligne 206: / Ligne 204: @@
 Du côté du template, on peut s'appuyer sur des macros Jinja2 pour factoriser le code en charge de produire le HTML du formulaire :
+<code html _helpers.html>
+{#
+Produire le code HTML d'un champ de formulaire.
+#}
+{% macro render_field_with_div(field) %}
+<div>
+    {{ field.label }} {{ field(**kwargs)|safe }}
+        {% if field.errors %}
+            <ul class=errors>
+            {% for error in field.errors %}
+                <li>{{ error }}</li>
+            {% endfor %}
+            </ul>
+    {% endif %}
+</div>
+{% endmacro %}
+</code>
+Une fois la macro définie, on peut l'utiliser dans les différents modèles produisant des formulaires.
+<code html>
+<div>
+    {% from "_helpers.html" import render_field_with_div %}
+    <form method="POST" action="{{ url_for('frontend.parse_contact_form') }}">
+        {{ form.csrf_token }}
+        {{ render_field_with_div(form.first_name) }}
+        {{ render_field_with_div(form.last_name) }}
+        {{ render_field_with_div(form.email) }}
+        {{ render_field_with_div(form.subject) }}
+        {{ render_field_with_div(form.message) }}
+        {{ render_field_with_div(form.submit_button) }}
+    </form>
+</div>
+</code>
+===== Validation =====
+C'est la fonction contrôleur de la vue qui se charge de valider le formulaire retourné en méthode POST.
+<code python [highlight_lines_extra="7"] >
+@frontend_bp.post('/contact')
+def parse_contact_form():
+    """
+    Analyse le formulaire de contact renseigné par l'utilisateur.
+    """
+    from app.services.forms import ContactForm
+    form = ContactForm()
+    if form.validate_on_submit():
+        # Les valeurs saisies sont correctes
+        return redirect(url_for('frontend.supply_home'))
+    else:
+        # Reafficher le formulaire pour permettre à l'utilisateur de corriger
+        flash('Vérifier les valeurs saisies')
+        return render_template('contact.html', form=form)
+</code>
+<note>
+L'exemple montre bien qu'il n'est pas nécessaire de passer l'objet ''request.form'' à l'instanciation du formulaire ContactForm (héritant de FlaskForm) : il sera automatiquement chargé.
+</note>
+La méthode ''validate_on_submit()'' vérifie que la méthode POST est utilisée et que le la saisie est valide.
+===== Débogages =====
+==== Échec systématique de la validation ====
+Lors du traitement du formulaire dans la vue, celui-ci est systématiquement considéré comme invalide.
+Lorsqu'un formulaire hérite de ''FlaskForm'', il contient systématiquement un **jeton CSRF** (processus de sécurité). Celui-ci doit être rendu dans le template.
+<code html>
+<form method="POST" action="/">
+    {{ form.csrf_token }}
+    <!-- vos autres champs ici -->
+    <input type="submit" value="Go">
+</form>
+</code>
 ===== Références =====

wikinotes

Outils pour utilisateurs

Outils du site

Différences

Outils de la page