Validation formulaire sur un modal en Ajax

**stomerfull** · 17/04/2020, 16h32

Bonjour ,

j'ai une fonctionnalité d’édition de profile utilisateur que j'affiche sur un modal popup en Bootstrap.
Mon problème c'est que pour une champ "required" lorsque je clique sur le bouton valider et que le champ n'est pas renseigner , le message d'erreur de symfony ne s'affiche pas et pareil pour tous les champs si on ne respecte pas les contraintes

Voici le code mon Ajax :

Code JavaScript :

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
  $(document).ready(function () {
 
        $('#_submit_user_detail').click(function (e) {
            e.preventDefault();
            $.ajax({
                type        : $('#user_detail_form').attr( 'method' ),
                url         : $('#user_detail_form').attr( 'action' ),
                data        : $('#user_detail_form').serialize(),
                success     : function(data) {
                    if (data.status == 0) {
                        $('#display_error_message').html(data.message);
                        //  $('#myModalBodyForm').html(data);
                        $('.loader').hide();
                    } else {
                      window.location.href= 'profile';                   
                      $('#edit_profil_information').trigger('click');
                    }
                },
                beforeSend: function(){
                    $('.error').addClass("d-none");
                    $('.loader').show();
                },
                error: function (data, status, object) {
                }
            });
        });
 
    });

Mon controlleur

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 /**
     * @Route("/profile-ajax", name="profile-ajax")
     * @Method({"GET", "POST"})
     */
    public function user_profil_ajax(Request $request ,ObjectManager $em, $username = null)
    {
        try{
            $user_current = (is_null($username))? $this->getUser() : $this->userManager->findUserBy(['username' => $username]) ;
        }
        catch( \Exception $exception){
            // error 404
            $user_current = $this->getUser();
        }
        $profile = $user_current->getProfile();
 
        if (!is_object($profile)) {
            $profile = new Profile();
            $user_current->setProfile($profile);
        }
 
        $formData['user'] = $user_current;
        $formData['profile']  = $profile;
 
 
        if (!$request->isXmlHttpRequest()) {
 
            return new JsonResponse(array('statut'=> 0 ,'message' => 'You can access this only using Ajax!'), 400);
 
        }else{
 
            $user_profil = $this->createForm(UserISVProfileType::class, $formData, [
                'action' => $this->generateUrl('profile'),
                'method' => 'POST',
            ]);
 
            $user_profil->handleRequest($request);
 
 
 
           if($user_profil->isSubmitted() &&  $user_profil->isValid())
           {
 
             try{
 
                    $request->getSession()->remove('error_profile');
 
                    $user_data = $user_profil['user']->getData();
                    $profil_data = $user_profil['profile']->getData();
 
                    //dump($user_data); exit;
 
                    $this->userManager->updateUser($user_data);
                    $profil_data->setUser($user_data);
                    $profile->setUpdateAt(new \DateTime('now'));
 
                    $em->persist($profil_data);
                    $em->flush();
 
                    return new JsonResponse([
                       "status" => 1,
                       "message" => 'the form is posted successfully!'
                    ]);
 
                } catch (Exception $ex) {
 
                   return new JsonResponse([
                           "status" => 0,
                           "message" => $ex->getMessage()
                        ]);
                }
 
            }
            else{
 
                 $request->getSession()->set('error_profile',true);
                 return new JsonResponse(['status' => 0,"message" => 'Invalid Form!']);
                    }
 
 
        }
       return new Response('not submitted');
 
    }

Mon modal :

Code HTML :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<div class="content-all-modal">
    <div class="modal fade" id="user_detail" tabindex="-1" role="dialog" aria-labelledby="User_detail"
         aria-hidden="true">
        <div class="modal-dialog login-modal" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title" id="exampleModalLongTitle">User Details</h1>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span class="icon-close-outline" aria-hidden="true"></span>
                    </button>
                </div>
                <div class="modal-body" id="myModalBodyForm">
                    <div class="d-block" id="view_sigin">
                        <div class="loader  text-center"><img class="rounded" width="100" height="100" src="{{ asset('resources/frontend/images/loader.gif') }}"></div>
                         <form id="user_detail_form" action="{{ path('profile-ajax') }}" method="POST" novalidate="novalidate"
                  class="needs-validation" enctype="multipart/form-data">
                            <div class="error alert alert-danger d-none error_term" role="alert"></div>
                            <div class="col-xl-3 col-lg-3 col-sm-12 col-12">
 
                                {# utils for add error message image file#}
                                <div class="invalid-feedback d-none mt-2 mb-2 block_image_error">
                                    <span class="form-error-icon badge badge-danger text-uppercase">Error</span>
                                    <span class="form-error-message _image_error"></span>
                                </div>
 
                                <div id="display_error_message">{{ form_errors(form) }}</div>
 
                                <div class="hidden_user_file d-none">
                                <input type="text" id="user_isv_profile_user_fileName" name="user_isv_profile[user][fileName]" required="required" class="Mytarget">
                                </div>   
 
                                {# end of error message image file#}
                                <div class="loading d-none">
                                    <img width="120" height="50" src="{{ asset('resources/frontend/images/loading.gif') }}">
                                </div>
 
                            </div>
 
                            <div id="user_detail_first_form">
                                    <div class="form-group row">
                                            <label class="col-form-label col-sm-4 form-control-label required"
                                                   for="contact_name">{{ form_label(form.user.firstName,'First name *') }}</label>
                                            <div class="col-sm-8">
                                                {{ form_widget(form.user.firstName,{'attr':{'class':'form-control'}}) }}
                                                {{ form_errors(form.user.firstName) }}
                                            </div>
 
                                    </div>
                                    <div class="form-group row">
                                            <label class="col-form-label col-sm-4 form-control-label required"
                                                   for="contact_name">{{ form_label(form.user.lastName,'Last name *') }}</label>
                                            <div class="col-sm-8">
                                                {{ form_widget(form.user.lastName,{'attr':{'class':'form-control'}}) }}
                                                {{ form_errors(form.user.lastName) }}
                                            </div>
                                    </div>
                                    <div class="form-group row">
                                            <label class="col-form-label col-sm-4 form-control-label required"
                                                   for="contact_name">{{ form_label(form.profile.pays,'Location *') }}</label>
                                            <div class="col-sm-8">
                                                <div class="js_form {{ js_form }}">
                                                    {{ form_widget(form.profile.pays,{'attr':{'class':'form-control','placeholder':''}}) }}
                                                    <span class="spinner-grow spinner-grow-sm {% if not form.profile.pays.vars.valid %}invalid-loader-pays{% else %}loader-pays{% endif %}"></span>
                                                    {{ form_errors(form.profile.pays) }}
                                                </div>
                                                <div class="js_profile {{ js_profile }}">
                                                    {{ profile.pays }}
                                                </div>
                                            </div>
                                     </div>
                                     <div class="form-group row">
                                            <label class="col-form-label col-sm-4 form-control-label required"
                                                   for="contact_name">{{ form_label(form.profile.companyName,'Company name *') }}</label>
                                            <div class="col-sm-8">
                                                <div class="js_form {{ js_form }}">
                                                    {{ form_widget(form.profile.companyName,{'attr':{'class':'form-control'}}) }}
                                                    {{ form_errors(form.profile.companyName) }}
                                                </div>
                                                <div class="js_profile {{ js_profile }}">
                                                    {{ profile.companyName }}
                                                </div>
                                            </div>
                                     </div>
                                     <div class="form-group row">
                                            <label class="col-form-label col-sm-4 form-control-label required"
                                                   for="contact_name">{{ form_label(form.profile.jobTitle,'Job title *') }}</label>
                                            <div class="col-sm-8">
                                                <div class="js_form {{ js_form }}">
                                                    {{ form_widget(form.profile.jobTitle,{'attr':{'class':'form-control'}}) }}
                                                    {{ form_errors(form.profile.jobTitle) }}
                                                </div>
                                                <div class="js_profile {{ js_profile }}">
                                                    {{ profile.jobTitle }}
                                                </div>
                                            </div>
                                     </div>
                             </div>
 
                             <div id="user_contact_info_second_form">
 
                                      <div class="form-group row">
                                             <label class="col-form-label col-sm-4 form-control-label required"
                                                   for="contact_name">{{ form_label(form.user.email,'Personal Email*') }}</label>
                                            <div class="col-sm-8">
                                                <div class="js_form {{ js_form }}">
                                                    {{ form_widget(form.user.email,{'attr':{'class':'form-control'}}) }}
                                                    {{ form_errors(form.user.email) }}
                                                </div>
                                                <div class="js_profile {{ js_profile }}">
                                                    {{ profile.jobTitle }}
                                                </div>
                                            </div>
                                     </div>
                                     <div class="form-group row">
                                             <label class="col-form-label col-sm-4 form-control-label required"
                                                   for="contact_name">{{ form_label(form.profile.personalEmail,'Working Email') }}</label>
                                            <div class="col-sm-8">
                                                <div class="js_form {{ js_form }}">
                                                    {{ form_widget(form.profile.personalEmail,{'attr':{'class':'form-control'}}) }}
                                                    {{ form_errors(form.profile.personalEmail) }}
                                                </div>
                                                <div class="js_profile {{ js_profile }}">
                                                    {{ profile.jobTitle }}
                                                </div>
                                            </div>
                                     </div>
                                     <div class="form-group row">
                                             <label class="col-form-label col-sm-4 form-control-label required"
                                                   for="contact_name">{{ form_label(form.profile.phoneNumber,'Phone number *') }}</label>
                                            <div class="col-sm-8">
                                                <div class="js_form {{ js_form }}">
                                                      {{ form_widget(form.profile.phoneNumber,{'attr':{'class':'form-control'}}) }}
                                                    {{ form_errors(form.profile.phoneNumber) }}
                                                </div>
                                                <div class="js_profile {{ js_profile }}">
                                                    {{ profile.jobTitle }}
                                                </div>
                                            </div>
                                     </div>
                            </div>
 
                            <div id="user_about_third_form">
                                 <div class="form-group row">
                                         <label class="col-form-label col-sm-4 form-control-label required"
                                               for="contact_name">{{ form_label(form.profile.about,'About *') }}</label>
                                        <div class="col-sm-8">
                                            <div class="js_form {{ js_form }}">
                                                  {{ form_widget(form.profile.about,{'attr':{'class':'form-control'}}) }}
                                                {{ form_errors(form.profile.about) }}
                                            </div>
                                            <div class="js_profile {{ js_profile }}">
                                                {{ profile.about }}
                                            </div>
                                        </div>
                                 </div>
                             </div>
 
                             <div class="form-group submit-form-popup pt-3">
                                <button type="button" class="btn signup" id="_submit_user_detail">Save</button>
                                <button type="button" class="btn btn-secondary cancel-btn" data-dismiss="modal">Cancel</button>                     
                             </div>
                             TOKEN
                             <input type="hidden" id="user_isv_profile_profile_HiddenCompanyName" name="user_isv_profile[profile][HiddenCompanyName]" value="ENTDD COLAS">
                            <input type="hidden" id="user_isv_profile__token" name="user_isv_profile[_token]" value="k8gqX2F9E4DfwvUOl6wEvv5RtRvPzd4KSdzccn80xn0">
                            {{ form_widget(form._token) }}
 
                        </form>
                    </div>
 
                </div>
            </div>
        </div>
    </div>
</div>

j'arrive à afficher le clé message dans mon retour JsonResponse dans mon formulaire , mais ce que je veux c'est d'afficher les validations de Symfony.
A ce que j'ai vu sur des forums , il semble qu'il me faudra reafficher le modal si status = 0 , c'est a dire reloader mon modal pour que les erreurs de validation de Symfony s'affiche mais je suis bloqué sur ce point.

Merci d'avance pour votre aide

**stomerfull** · 24/04/2020, 17h23

j'ai réussi à résoudre mon problème par moi même : utilisation de form_start et form_end , integration du token du formulaire

J'ouvre le modal par Ajax et je gére l'affichage des erreurs par Javsacripts en plus des erreurs gérés par Symfony

Validation formulaire sur un modal en Ajax [4.x]

Symfony PHP

Vue hybride

Discussions similaires

Partager

Partager