Discussion :

[dubitoph]

Bonjour,

J'ai un formulaire d'enregistrement d'un compte utilisateur en modal et appelé depuis mon template 'base.html.twig'. Je voudrais que si des erreurs de formulaire existent après le submit (contrôle des contraintes au niveau de l'entité), je voudrais que mon formulaire modal soit ré-affiché.

Donc, pour ce faire, dans mon controller traitant l'enregistrement, si le formulaire n'est pas valide, je crée une variable de session. Ensuite, dans mon template 'base.html.twig' je vérifie si la variable de session existe. Si oui, alors je passe l'attribut data visibility à 1 au niveau de la div modale. Et pour terminer, en JavaScript, si cet attribut data visibility est à 1, je fais un show de ladite div.

Mon problème est que, si des erreurs sont présentes, le formulaire n'est pas automatiquement ré-affiché après le submit. Il faut que je clique moi-même sur le bouton pour le faire.

Voici, en captures d'écran, le flux afin de tenter me me faire comprendre au mieux .

Je clique sur le bouton de création d'un compte :



Je complète le formulaire modal en encodant expressément des erreurs :



Je soumets le formulaire :



Après la soumission, le formulaire n'est pas ré-affiché malgré l'existence d'erreurs :



Je dois moi-même re-cliquer sur le bouton 'Sign up' pour ré-afficher le formulaire :





C'est problématique car l'utilisateur final ne saura pas qu'il existe des erreurs et qu'il doit alors re-cliquer sur le bouton 'Sign up'.

Voici mon code.

Dans mon template 'base.html.twig' :

Code twig :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
...
      {% if app.session.get('errorFomRegistration') %}
        <div id="registrationModal" class="modal fade" role="dialog" data-visibility='1'>
      {% else %}
        <div id="registrationModal" class="modal fade" role="dialog" data-visibility='0'>
      {% endif %}
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title">Sign up</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <div>
                  {% if app.session.get('errorFomRegistration') %}
                    {{ include('_messages.html.twig') }}
                  {% endif %}
                </div>
                {{ render(controller('App\\Controller\\security\\SecurityController::registration', {'request': app.request})) }}
              </div>
            </div>
          </div>
        </div>
        </div>
...

Dans mon controller 'SecurityController.php' :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
    /**
     * User registration
     * 
     * @Route("/security/registration/{shortForm}", name="security.registration")
     *
     * @param bool $shortForm
     * @param Request $request
     * @param EntityManagerInterface $manager
     * @param UserPasswordEncoderInterface $encoder
     * @param AuthorizationCheckerInterface $authChecker
     * @param \Swift_Mailer $mailer
     * @param UserRepository $userRepository
     * 
     * @return Response
     */
    public function registration(bool $shortForm = false, Request $request, EntityManagerInterface $manager, UserPasswordEncoderInterface $encoder, 
                                  AuthorizationCheckerInterface $authChecker, \Swift_Mailer $mailer, UserRepository $userRepository): Response
    {
 
        $session = $this->get('session');
 
        $session->set('errorFomRegistration', false);
...
        $form->handleRequest($request);
 
        if ($form->isSubmitted())
        {
 
            if ($form->isValid())
            {
...
            }
            else 
            {
 
                $session->set('errorFomRegistration', true);
                \dump($session->get('errorFomRegistration'));
 
            }
 
        }
...

Et pour terminer, dans mon app.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
...
  // Display the login modal form if there is an autentication error
  var $registrationDiv = $('#registrationModal');
 
  console.log('Before display');
 
  if($registrationDiv.data('visibility') == '1')
  {
 
    console.log('Visible');
 
    $registrationDiv.modal('show');
 
  }
...

Quelqu'un aurait une idée pour me sortir de ce problème sur lequel je sèche depuis quelques semaines?

Merci d'avance pour votre aide.

[insaneness]

Bonjour,
Et que disent ces différents logs que tu as mis (php et js) ? Fais également un console.log de $registrationDiv.data('visibility').
La soumission du formulaire de signup est en ajax ou bien la page est elle reloadée ?

[dubitoph]

Bonjour,

Merci beaucoup pour ton intérêt. Je galère sévère

Donc, comme tu l'as proposé, j'ai ajouté

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 console.log('Visibility = ' + $registrationDiv.data('visibility'));

dans mon app.js.

Voici ce que donne les logs.

Au premier appel de la page :

Visibility = 0
Before display

Au clic sur le bouton "SIGN UP" et donc à l'affichage du formulaire en mode modal, pas de changement.

Après la soumission du formulaire et donc du reload (non ajax) de la page, voici les logs :

Visibility = 0
Before display

Le formulaire n'est pas automatiquement ré-affiché.

Si je clique sur le bouton "SIGN UP", le formulaire se ré-affiche sans log supplémentaire :



Si je re-soumets le formulaire, la page est reloadée avec toujours les même logs :

Visibility = 0
Before display

[insaneness]

Il semble donc que la variable 'errorFomRegistration' ne soit pas ajoutée à la session.
Le log dans le else lorsque le formulaire n'est pas valide permet bien de voir cette nouvelle variable de session ?

Je suggère aussi de ne pas passer le parametre de request à cet endroit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{{ render(controller('App\\Controller\\security\\SecurityController::registration', {'request': app.request})) }}

[dubitoph]

Encore merci pour ton aide.

Pour répondre à ta question, c'est oui. Lorsque je clique sur "SIGN UP" afin de ré-afficher le formulaire, j'ai ceci :



La variable est donc bien mise en session, selon moi.

Je n'avais pas fait attention à ta suggestion de modification dans Twig (paramètre request). J'avais déjà tenté, mais je pense que ça me provoquait une erreur. Je retente cela et je reviens vers toi.

[insaneness]

En se basant sur les bouts de code fournis ça devrait fonctionner...
Sinon fais la soumission du formulaire en ajax, comme ça plus de problème de ré-ouverture de modale.

[dubitoph]

J'ai effectué à nouveau le test sans le passage du paramètre request. Dans ce cas, même si j'encode des données erronées, je n'ai pas d'erreur remontée dans la console ni d'erreur lors du ré-affichage du formulaire :

1. Appel du formulaire



2. Complétion du formulaire avec des données non valide :



3. Soumission du formulaire



4. Reload de la page et console sans erreur :



5. Ré-appel du formulaire qui ne contient plus de donnée et n'affiche donc plus non plus d'erreur :