vérification et envoie de formulaire avec javascript(ajax) et symfony 3

Bonjour,

Comme le dit le titre de ma discussion, j'aimerais savoir comment faire la vérification(affichage des erreurs en javascript) et, envoie des données(si les champs sont bien remplis, ouvertur POPUP) des champs d'un formulaire avec javascrit/ajax dans symfony 3 ? Si quelqu'un à un lien ou peut m'éclairer sur ce sujet je serai très content parce que je ne trouve nul part un tuto, ou forum qui en parle, ou qui l'explique pour les débutants comme moi !

Merci

Bonjour,
les validations de form javascript il ya plein de validator sur le net a toi de voir .
Pour afficher des messages d'erreur (ajout de style) , http://api.jqueryui.com/addClass/
Pour utiliser ajax en Sf , https://symfony.com/doc/current/bund...dle/index.html

Le principe alors est de creer une action controlleur qui retourne uen responseJson, si le formulaire est invalide l'appel ajax ne sera pas lancer car des le debut il sera bloqué par la validation js que tu va le faire coté browser

Bonjour,

Merci mehrezlabidi je regarde ça et je te fais un retour !

Bonjour,

J'ai regardé (installer fosjsroutingbundle )mais pas clair encore pour moi quelqu'un à une idée ?

Merci

Bonjour,
ou est le blocage pour jsroutingBundle , installation ou usage ?

l'utilisation de jsroutingBundle n'est pas obligatoire pour ajax mais c'est la méthode la plus complète
exemple :
https://blog.intelligentbee.com/2015...orms-and-ajax/

Citation:

Envoyé par MehrezLabidi

Bonjour,
ou est le blocage pour jsroutingBundle , installation ou usage ?

l'utilisation de jsroutingBundle n'est pas obligatoire pour ajax mais c'est la méthode la plus complète
exemple :
https://blog.intelligentbee.com/2015...orms-and-ajax/

Salut MehrezLabidi,

Merci encore de tes réponses . Je t'explique avec les codes que j'ai :

Dans mon controller : indexAction

Code:

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
 
<?php
 
namespace fullz\fullzBundle\Controller;
 
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
 
use fullz\fullzBundle\Entity\Users;
use fullz\fullzBundle\Form\UsersType;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
 
class FullzController extends Controller
{
 
    public function indexAction(Request $request)
    {
        // On crée un client
        $user = new Users();
 
        // On recupère le formulaire
        $form = $this->createForm(UsersType::class, $user);
 
        // Avant de générer le formulaire, on relie l'objet du formulaire à la requete qui va être envoyer
        $form->handleRequest($request);
 
        // Si le formulaire a été soumis
        if ($form->isSubmitted() && $form->isValid()){
 
                // On enregistre le client en bdd, mais avant on récupère l'entity manager
                $em = $this->getDoctrine()->getManager();
 
                // On demande à l'objet manager de persister l'objet user : $user
                $em->persist($user);
                $em->flush();
 
                // Le controller est obligé de retourner une reponse ( à revoir )
                return  new Response('client test !');
        }
 
        // On génère le HTML du formulaire créer
        return $this->render('fullzBundle:Fullz:index.html.twig',array('form' => $form->createView()));
    }
}

Il marche sans mon code javascript . Les données sont envoyées en bdd sans problème. Mais une fois l'ajout de javascript pour les vérifications et envoie de données en bdd, j'ai rien en bdd mais que les premières messages de vérifications du javascript qui s'affichent .
Code javascript :

Code:

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
 
/* global Routing */
 
app = {
     /*
    * Fonction appelée au chargement du DOM
    */
    init: function() {
        console.info("app.init")
 
        // J'écoute le clic sur le bouton d'envoi...
        $(".envoi").on("click", this.monSubmit)
 
    },
 
    /*
    * Handler du submit
    */
 
    monSubmit: function(e){
        console.info("app.monSubmit")
 
        // On arrête le chargment de la page
        e.preventDefault()
 
 
        // Appel de la fonction pour la vérif...
        app.stopChamp()
 
    },
 
     stopChamp: function(){
         console.info("app.stopChamp")
 
        if($(".envoi")){ 
 
          var error = [];
          if($(".identif").val()==""){
            // On sélectionne le span qui à la class : error-message avec ".next"
            error["identif"] = $(".identif").next(".error-message").fadeIn(1000).text("Veuillez  bien renseigner le champ !")
          }else{
            if(!$(".identif").val().match(/^[a-z]+$/i)){
              error["identif"] = $(".identif").next(".error-message").fadeIn(1000).text("Nom du url pas valide !")
            }else
              $(".identif").next(".error-message").fadeOut()
          }
 
 
          if($(".mail").val() == ""){
            error["mail"] = $(".mail").next(".error-message").fadeIn(1000).text("Veuillez  bien renseigner l'email !")
          }else{
            if(!$(".mail").val().match(/^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/)){
              error["mail"] = $(".mail").next(".error-message").fadeIn(1000).text("Votre email n'est pas valide !")
            }
            else
              $(".mail").next(".error-message").fadeOut()
          }
 
          if(!error["mail"] && !error["identif"]){
            var $this = $(".envoi")
                $this.attr("disabled", "disabled") 
                    setTimeout(function(){
                      $this.attr("value", "Chargement...")
                              .css({
                                    opacity : 0.4,
                                    cursor  : "not-allowed" 
                                })
                    },300)
 
                    // Appel de la fonction qui fera la requête Ajax
                    app.reqAjax()
 
                    return false
          }
 
        }// End test
 
     },
    reqAjax: function(){
       console.info("app.reqAjax")
 
       // On récupère l'url et le type
            //var url  = this.action
            var url  = Routing.generate('fullz')
 
	   //var type = this.method
            var type  = 'POST'
 
      // On récupère les infos (identif et mail) 
      // var data = $(this).serialize()
	var data = form.serialize()
 
      // On fait la requête
      $.ajax({
	type: type,
        url: url,
        data: data,
        success: app.showSuccess
      })
 
    },
 
     showSuccess: function(){
       console.info("app.showSuccess")
 
       // On crée la div qui servira de griser le fond....
       var popup = $("<div>",{
         class: "test",
         css:{
         background: "rgba(0,0,0,.8)",
		 width: "100%",
		 height: "100%",
         position: "fixed",
		 top: 0,
		 left: 0,
         "z-index": 1
         }
       })
 
      // On ajoute la DIV (grisée) au body
      $("body").append(popup)
 
      // On l'a fait apparaitre après quelques sécondes...
      popup.fadeTo(600, 0.5, function () {
        // On fait apparaitre le POPUP ,après quelques sécondes...
        $(".recupPopup").fadeIn(4000)
      })
     }
 
}
 
/*
 * Chargement du DOM
 */
$(function(){
    app.init();
})

Le formulaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<div id="form">
        {{ form_start(form,{'attr' : {novalidate : 'novalidate' ,action : ''}}) }}
              <div class ="identif">
                  {{ form_errors(form.identif,{'class':'error-message'}) }}
                  {{ form_label(form.identif) }} <span class ="error" title="This field is required" >*</span>
                  {{ form_widget(form.identif,{'attr' : {'placeholder' : 'Ex : alouette'}}) }}
                  <span class = "error-message">error</span>
              </div><!-- endidentif -->
 
            <div class ="mail">
                {{ form_errors(form.mail,{'class':'error-message'}) }}
                {{ form_label(form.mail) }} <span class ="error" title="This field is required" >*</span>
                {{ form_widget(form.mail,{'attr' : {'placeholder' : 'Ex: mignonne@hotmail.fr'}}) }}
                <span class = "error-message">error</span>
            </div><!-- endmail -->
 
            {#<div class ="sender">#}
                {{ form_widget(form)}}
            {#</div>#}
            {{ form_rest(form) }}
        {{ form_end(form) }}
    </div><!-- endform -->

Alors comment avec ces codes je puisse faire marcher mon javascript ( affcihage des erreurs de formualaire et envoie en bdd en ajax) avec symfony (FOSJsRoutingBundle) ? Bien sûr sans oublier mon Entity et aussi le FormType que j'ai déjà.

Merci