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.