Flask - две модальные формы в одном шаблоне - PullRequest
0 голосов
/ 21 мая 2019

У меня есть два модальных бутстрапа в одном шаблоне. Но когда я пытаюсь отправить запрос, form_validate_on_submit всегда возвращает false, а когда я заглядываю внутрь инспектора кода браузера, у меня появляется предупреждение о том, что csrf_token говорит следующее:

Found 2 elements with non-unique id #csrf_token

Это то, что я написал внутри view.py

@main.route('/formation-diplomante', methods=['GET', 'POST'])
def formation_diplomante():
    form = DownloadForm()
    inscription = InsciptionForm()
    if request.method == "POST" and form.validate_on_submit():
        print("Good for me")
    if request.method == "POST" and inscription.validate_on_submit():
        print("Here am i")

    return render_template("main/formation-diplomante.html", form=form, inscription=inscription)

Мой шаблон выглядит так:

<!-- First modal -->
<div class="modal fade" id="ProspectDownload" tabindex="-1" role="dialog" aria-labelledby="ProspectDownload" style="margin-top: 10%;" aria-hidden="true">
     <div class="modal-dialog" role="document">
          <div class="modal-content" style="border-radius: 3%;">
               <div class="modal-body">
                    <div>
                         <img class="img-fluid" width="80" height="50" src="{{url_for('static', filename='main/images/logo_CME.png')}}"  alt="" />
                         <button type="button" class="close" data-dismiss="modal">
                              <span>×</span>
                         </button>
                    </div>
                    <hr class />
                    <form method="POST" action="">
                         {{ form.csrf_token }}
                         {{ form.formation_consernee(placeholder='Votre formation', class='single-input', required='required') }}
                         <div class="input-group-icon mt-10">
                              <div class="icon">
                                   <i class="fa fa-user" aria-hidden="true"></i>
                              </div>
                               {{ form.nom_prospect(placeholder='Votre nom', class='single-input', required='required') }}
                         </div>
                         <div class="input-group-icon mt-10">
                              <div class="icon">
                                   <i class="fa fa-at" aria-hidden="true"></i>
                              </div>
                              {{ form.email_prospect(placeholder='Votre email', type='text', class='single-input', required='required') }}
                         </div>
                         <div class="input-group-icon mt-10">
                              <div class="icon">
                                   <i class="fa fa-phone" aria-hidden="true"></i>
                              </div>
                              {{ form.tel_prospect(placeholder='Votre numéro de téléphone', type='tel', class='single-input', required='required', onkeypress='return event.charCode >= 48 && event.charCode <= 57') }}
                         </div>
                         <div class="button-group-area m-3 d-flex justify-content-around">
                              <button type="submit" class="genric-btn primary small plaquette"><i class="fa fa-download" aria-hidden="true"></i> Télécharger</button>
                         </div>
                    </form>
               </div>
          </div>
     </div>
</div>

<!-- Second modal -->
<div class="modal fade" id="Preinscription" tabindex="-1" role="dialog" aria-labelledby="Preinscription" style="" aria-hidden="true">
     <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content" style="border-radius: 3%;">
               <div class="modal-body">
                    <div>
                         <img class="img-fluid" width="80" height="50" src="{{url_for('static', filename='main/images/logo_CME.png')}}"  alt="" />
                         <button type="button" class="close" data-dismiss="modal">
                              <span>×</span>
                         </button>
                    </div>
                    <hr class />
                    <form method="POST" action="">
                         {{ inscription.csrf_token }}
                         {{ inscription.cursus_consernee(required='required') }}
                         {{ inscription.type_formation(required='required') }}
                         {{ inscription.formation_conserne(required='required') }}
                         <div class="row">
                              <div class="col-6 input-group-icon mt-10">
                                   <label for="nom_candidat">Vos noms et prénoms <span style="color:red">(*)</span> :</label>
                                   {{ inscription.nom_candidat(placeholder='Vos noms et prénoms', class='single-input', required='required') }}
                              </div>
                              <div class="col-6 input-group-icon mt-10">
                                   <label for="email_candidat">Votre adresse e-mail <span style="color:red">(*)</span> :</label>
                                   {{ inscription.email_candidat(placeholder='Votre nom', type="email", class='single-input', required='required') }}
                              </div>
                         </div>

                         <div class="row">
                              <div class="col-6 input-group-icon mt-10">
                                   <label for="date_naissance_candidat">Votre date de naissance <span style="color:red">(*)</span> :</label>
                                   {{ inscription.date_naissance_candidat(placeholder='Date de naissance', class='single-input', required='required', type="date") }}
                              </div>
                              <div class="col-6 input-group-icon mt-10">
                                   <label for="lieu_naissance_candidat">Votre lieu de naissance <span style="color:red">(*)</span> :</label>
                                   {{ inscription.lieu_naissance_candidat(placeholder='Lieu de naissance', class='single-input', required='required') }}
                              </div>
                         </div> 

                         <div class="row">
                              <div class="col-6 input-group-icon mt-10">
                                   <label for="nationalite_candidat">Votre nationalité <span style="color:red">(*)</span> :</label>
                                   {{ inscription.nationalite_candidat(placeholder='Nationalité', class='single-input', required='required') }}
                              </div>
                              <div class="col-6 input-group-icon mt-10">
                                   <label for="sexe_candidat">Votre sexe <span style="color:red">(*)</span> :</label>
                                   {{ inscription.sexe_candidat(placeholder='Sexe', class='single-input', required='required') }}
                              </div>
                         </div> 

                         <div class="row">
                              <div class="col-6 input-group-icon mt-10">
                                   <label for="telephone_candidat">Votre numéro de téléphone <span style="color:red">(*)</span> :</label>
                                   {{ inscription.telephone_candidat(placeholder='Votre numéro de téléphone', type='tel', class='single-input', required='required', onkeypress='return event.charCode >= 48 && event.charCode <= 57') }}
                              </div>
                              <div class="col-6 input-group-icon mt-10">
                                   <label for="mobile_candidat">Deuxième numéro de téléphone :</label>
                                   {{ inscription.mobile_candidat(placeholder='Deuxième numéro de téléphone', type='tel', class='single-input', onkeypress='return event.charCode >= 48 && event.charCode <= 57') }}
                              </div>
                         </div>

                         <div class="row">
                              <div class="col-6 input-group-icon mt-10">
                                   <label for="statut_candidat">Votre Statut <span style="color:red">(*)</span> :</label>
                                   {{ inscription.statut_candidat(placeholder='Votre Statut', class='single-input', required='required') }}
                              </div>
                              <div class="col-6 input-group-icon mt-10">
                                   <label for="etudiant_cme">Avez vous fréquenté au CME ? <span style="color:red">(*)</span> :</label>
                                   {{ inscription.etudiant_cme(placeholder='Etudiant du CME ?', class='single-input', required='required') }}
                              </div>
                         </div>

                         <div class="button-group-area m-3 d-flex justify-content-around">
                              <button type="submit" class="genric-btn primary small plaquette"><i class="fa fa-sign-in" aria-hidden="true"></i> Se préinscrire</button>
                         </div>
                    </form>
               </div>
          </div>
     </div>
</div>

Где я делаю не так?

...