amélioration erreurs formulaire dynamique

app/entreprises/forms.py

@@ -471,6 +471,7 @@ class CorrespondantModificationForm(FlaskForm):
         if not self.telephone.data and not self.mail.data:
             msg = "Saisir un moyen de contact (mail ou téléphone)"
             self.telephone.errors.append(msg)
+            self.mail.errors.append(msg)
             validate = False
 
         return validate
@@ -690,7 +691,7 @@ class TaxeApprentissageModificationForm(FlaskForm):
 
 class EnvoiOffreForm(FlaskForm):
     responsables = FieldList(
-        _build_string_field(
+        StringField(
             "Responsable (*)",
             render_kw={
                 "placeholder": "Tapez le nom du responsable de formation",
@@ -703,6 +704,8 @@ class EnvoiOffreForm(FlaskForm):
 
     def validate(self):
         validate = True
+        list_select = True
+
         if not FlaskForm.validate(self):
             validate = False
 
@@ -718,8 +721,12 @@ class EnvoiOffreForm(FlaskForm):
                     .first()
                 )
                 if responsable is None:
-                    entry.errors.append("Champ incorrect (selectionnez dans la liste)")
+                    validate, list_select = False, False
-                    validate = False
+
+        if list_select is False:
+            self.responsables.errors.append(
+                "Champ incorrect (selectionnez dans la liste)"
+            )
 
         return validate
 

app/static/css/entreprises.css

@@ -131,7 +131,7 @@
     margin-right: 20px;
 }
 
-.title-form {
+.title-form-error {
     font-weight: bold;
     color: #a94442
 }

app/templates/entreprises/ajout_correspondants.html

@@ -16,9 +16,10 @@
             </p>
             <form method="POST" action="" novalidate>
                 {{ form.hidden_tag() }}
+                {{ form.correspondants.label }}
                 {% for subfield in form.correspondants %}
-                    {% if form.correspondants.errors %}
+                    {% if subfield.errors %}
-                        <p class="help-block title-form">Formulaire Correspondants-{{ loop.index-1 }}</p>
+                    <p class="title-form-error">Formulaire {{ subfield.label.text }}</p>
                     {% endif %}
                     {% for subsubfield in subfield %}
                         {% if subsubfield.errors %}
@@ -59,7 +60,22 @@
                 }
                 let newFieldName = `correspondants-${Math.max(...correspondantInputIds) + 1}`;
                 allCorrepondantsFieldWrapper.insertAdjacentHTML('beforeend',`
-                <li><label for="${newFieldName}">Correspondants-${Math.max(...correspondantInputIds) + 1}</label><table id="${newFieldName}"><tr><th><label for="${newFieldName}-civilite">Civilité (*)</label></th><td><select class="form-control" id="${newFieldName}-civilite" name="${newFieldName}-civilite" required><option value="H">Monsieur</option><option value="F">Madame</option></select></td></tr><tr><th><label for="${newFieldName}-nom">Nom (*)</label></th><td><input class="form-control" id="${newFieldName}-nom" name="${newFieldName}-nom" required type="text" value=""></td></tr><tr><th><label for="${newFieldName}-prenom">Prénom (*)</label></th><td><input class="form-control" id="${newFieldName}-prenom" name="${newFieldName}-prenom" required type="text" value=""></td></tr><tr><th><label for="${newFieldName}-telephone">Téléphone (*)</label></th><td><input class="form-control" id="${newFieldName}-telephone" name="${newFieldName}-telephone" type="text" value=""></td></tr><tr><th><label for="${newFieldName}-mail">Mail (*)</label></th><td><input class="form-control" id="${newFieldName}-mail" name="${newFieldName}-mail" type="text" value=""></td></tr><tr><th><label for="${newFieldName}-poste">Poste</label></th><td><input class="form-control" id="${newFieldName}-poste" name="${newFieldName}-poste" type="text" value=""></td></tr><tr><th><label for="${newFieldName}-service">Service</label></th><td><input class="form-control" id="${newFieldName}-service" name="${newFieldName}-service" type="text" value=""></td></tr><tr><th><label for="${newFieldName}-origine">Origine</label></th><td><input class="form-control" id="${newFieldName}-origine" name="${newFieldName}-origine" type="text" value=""></td></tr><tr><th><label for="${newFieldName}-notes">Notes</label></th><td><input class="form-control" id="${newFieldName}-notes" name="${newFieldName}-notes" type="text" value=""></td></tr></table><input id="${newFieldName}-csrf_token" name="${newFieldName}-csrf_token" type="hidden" value=${csrf_token}><div class="btn btn-default btn-remove" onclick="deleteForm('${newFieldName}')">Retirer ce correspondant</div></li>
+                <li>
+                    <label for="${newFieldName}">Correspondants-${Math.max(...correspondantInputIds) + 1}</label>
+                    <table id="${newFieldName}">
+                        <tr><th><label for="${newFieldName}-civilite">Civilité (*)</label></th><td><select class="form-control" id="${newFieldName}-civilite" name="${newFieldName}-civilite" required><option value="H">Monsieur</option><option value="F">Madame</option></select></td></tr>
+                        <tr><th><label for="${newFieldName}-nom">Nom (*)</label></th><td><input class="form-control" id="${newFieldName}-nom" name="${newFieldName}-nom" required type="text" value=""></td></tr>
+                        <tr><th><label for="${newFieldName}-prenom">Prénom (*)</label></th><td><input class="form-control" id="${newFieldName}-prenom" name="${newFieldName}-prenom" required type="text" value=""></td></tr>
+                        <tr><th><label for="${newFieldName}-telephone">Téléphone (*)</label></th><td><input class="form-control" id="${newFieldName}-telephone" name="${newFieldName}-telephone" type="text" value=""></td></tr>
+                        <tr><th><label for="${newFieldName}-mail">Mail (*)</label></th><td><input class="form-control" id="${newFieldName}-mail" name="${newFieldName}-mail" type="text" value=""></td></tr>
+                        <tr><th><label for="${newFieldName}-poste">Poste</label></th><td><input class="form-control" id="${newFieldName}-poste" name="${newFieldName}-poste" type="text" value=""></td></tr>
+                        <tr><th><label for="${newFieldName}-service">Service</label></th><td><input class="form-control" id="${newFieldName}-service" name="${newFieldName}-service" type="text" value=""></td></tr>
+                        <tr><th><label for="${newFieldName}-origine">Origine</label></th><td><input class="form-control" id="${newFieldName}-origine" name="${newFieldName}-origine" type="text" value=""></td></tr>
+                        <tr><th><label for="${newFieldName}-notes">Notes</label></th><td><input class="form-control" id="${newFieldName}-notes" name="${newFieldName}-notes" type="text" value=""></td></tr>
+                    </table>
+                    <input id="${newFieldName}-csrf_token" name="${newFieldName}-csrf_token" type="hidden" value=${csrf_token}>
+                    <div class="btn btn-default btn-remove" onclick="deleteForm('${newFieldName}')">Retirer ce correspondant</div>
+                </li>
                 `);
             });
         }

app/templates/entreprises/envoi_offre_form.html

@@ -18,13 +18,9 @@
             </p>
             <form method="POST" action="" novalidate>
                 {{ form.hidden_tag() }}
-                {{ form.responsables.label }}<br>
+                {{ form.responsables.label }}
-                {% for subfield in form.responsables %}
+                {% for error in form.responsables.errors %}
-                    {% if subfield.errors %}
+                    <p class="help-block form-error">{{ error }}</p>
-                        {% for error in subfield.errors %}
-                            <p class="help-block form-error">{{ error }}</p>
-                        {% endfor %}
-                    {% endif %}
                 {% endfor %}
                 {{ form.responsables }}
                 <div style="margin-bottom: 10px;">
@@ -71,7 +67,11 @@
                 }
                 let newFieldName = `responsables-${Math.max(...responsableInputIds) + 1}`;
                 allResponsablesFieldWrapper.insertAdjacentHTML('beforeend',`
-                <li><label for="${newFieldName}">Responsable (*)</label><input class="form-control" id="${newFieldName}" name="${newFieldName}" type="text" value="" placeholder="Tapez le nom du responsable de formation"><div class="btn btn-default btn-remove" onclick="deleteForm('${newFieldName}')">Retirer</div></li> 
+                <li>
+                    <label for="${newFieldName}">Responsable (*)</label>
+                    <input class="form-control" id="${newFieldName}" name="${newFieldName}" type="text" value="" placeholder="Tapez le nom du responsable de formation">
+                    <div class="btn btn-default btn-remove" onclick="deleteForm('${newFieldName}')">Retirer</div>
+                </li> 
                 `);
                 var as_r = new bsn.AutoSuggest(newFieldName, responsables_options);
             });