Gérer les formulaires avec jQuery et Ajax

Gérer les formulaires avec jQuery et Ajax

  1. Objectifs

    • Etre capable d’utiliser l’Ajax pour gérer les formulaires et valider ses différents champs en temps réel et sans rechargement de la page.
  2. Gérer les formulaires avec jQuery et Ajax

    • Au cours de ce tutoriel, nous allons créer un formulaire de connexion en AJAX grâce à jQuery.
    • Côté client : HTML
      • Commençons par un formulaire HTML,qui devra être liée à jQuery, mais surtout proposer un formulaire HTML afin de laisser le visiteur entrer ses informations.
      • La figure suivante illustre le schéma du formulaire souhaité
      • Gérer les formulaires avec jQuery et Ajax

        <div class="container w-50">
              <fieldset class="p-2">
                <legend  class="w-auto">Inscription</legend>
              <h4 class=" text-center text-primary pb-2">Un formulaire de connexion en AJAX</h4>
              <form class="needs-validation" novalidate>
                  <div class="form-row">
                      <div class="col-md-4 mb-2">
                          <label for="prenom">Prénom</label>
                          <input type="text" class="form-control" id="prenom" placeholder="Riadh" required>
                          <div class="valid-feedback">Ok !</div>
                          <div class="invalid-feedback">Valeur incorrecte</div>
                      </div>
                      <div class="col-md-4 mb-2">
                          <label for="nom">Nom de famille</label>
                          <input type="text" class="form-control" id="nom" placeholder="HAJJI" required>
                          <div class="valid-feedback">Ok !</div>
                          <div class="invalid-feedback">Valeur incorrecte</div>
                      </div>
                      <div class="col-md-4 mb-2">
                          <label for="pseudo">Adress Mail</label>
                          <input type="email" class="form-control" id="pseudo" placeholder="hajjriadh@gmail.com" required>
                          <div class="valid-feedback">Ok !</div>
                          <div class="invalid-feedback">Valeur incorrecte</div>
                      </div>
                  </div>
                  <div class="form-row">
                      <div class="col-md-4 mb-2">
                          <label for="Pays">Ville</label>
                          <input type="text" class="form-control" id="ville" placeholder="Pays" required>
                          <div class="valid-feedback">Ok !</div>
                          <div class="invalid-feedback">Valeur incorrecte</div>
                      </div>
                      <div class="col-md-4 mb-2">
                          <label for="pays">Pays</label>
                          <input type="text" class="form-control" id="pays" placeholder="Ville" required>
                          <div class="valid-feedback">Ok !</div>
                          <div class="invalid-feedback">Valeur incorrecte</div>
                      </div>
                      <div class=col-md-4 mb-2">
                          <label for="cp">Code postal</label>
                          <input type="number" class="form-control" id="cp" placeholder="Code postal" required>
                          <div class="valid-feedback">Ok !</div>
                          <div class="invalid-feedback">Valeur incorrecte</div>
                      </div>
                  </div>
                  <div class="form-group">
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="cgu" required>
                        <label class="form-check-label" for="cgu">J'accepte les conditions générales d'utilisation et de vente</label>
                        <div class="invalid-feedback">Vous devez accepter les CGU pour continuer</div>
                      </div>
                  </div>
                  <button class="btn btn-primary" type="submit">Envoyer</button>
              </form>
            </fieldset>
          </div>
    • C’est un formulaire très basique, crée avec bootstrap4.



    • Côté client : AJAX
      • Une bonne pratique est de créer un nouveau fichier pour chaque appel AJAX que nous souhaitons faire sur notre page web et ensuite de la lier à la page HTML grâce à la balise<script>.
      •   <script src="inscription.js"></script>
        
      • Soumettez les données du formulaire HTML à l’aide de la méthode jQuery.ajax(), c’est utiliser la méthode ajax() pour exécuter une requête.
      • Création de requêtes Ajax avec jQuery

      • Pour plus d’information lire l’article Création de requêtes Ajax avec jQuery
        • Les méthodes serialize() et serializeArray()
          • jQuery met deux méthodes à notre disposition pour sérialiser les données de formulaire : les méthodes serialize() et serializeArray().
          • Les deux méthodes vont nous permettre de modifier le format des données de formulaire avant leur envoi.
          • La méthode serialize()
            • La méthode serialize() crée une chaîne de texte codée URL en sérialisant les valeurs du formulaire.
            • La méthode serialize() est une méthode intégrée dans jQuery qui est utilisée pour créer une chaîne de texte en notation encodée URL standard.
            • Syntaxe:
            • $(selector).serialize()
            • Exemple:
            • $("button").click(function(){
                $("div").text($("form").serialize());
              });
          • La méthode serializeArray()
            • La méthode serializeArray () est une méthode intégrée dans jQuery qui est utilisé pour créer un tableau JavaScript d’objets qui est prêt à être codé comme une chaîne JSON.
            • La méthode fonctionne sur une collection jQuery de formulaires et / ou de contrôles de formulaire. Les contrôles peuvent être de plusieurs types.
            • Syntaxe:
            • $ (sélecteur).serializeArray ()
            • Exemple:
            • <script> 
                      $(document).ready(function() { 
                          $("button").click(function() { 
                              var x = $("form").serializeArray(); 
                              $.each(x, function(i, field) { 
                                  $("#d").append(field.name + ":" + field.value + ":::"); 
                              }); 
                          }); 
                      }); 
                  </script> 
      • Valider les formulaires en jQuery Ajax

        • La validation de formulaire en jQuery Ajax, consiste à vérifier si les champs de formulaire qui doivent être remplis le sont bien. Si ce n’est pas le cas, on voudra alerter l’utilisateur et empêcher l’envoi du formulaire.
        • On peut utiliser plusieurs méthodes pour valider notre formulaire
        • Citer tous les ID des composants du formulaire
          • $(document).ready(function(){
                  $("form").submit(function(event){
                      /*Si la longueur de la valeur du champ #prenom est 0 (c'est-à-dire si
                      le champ n'a pas été rempli), on affiche un message et on empêche l'envoi*/
                      if($("#prenom").val().length === 0){
                          $("#prenom").after("<span>Merci de remplir ce champ</span>");
                          event.preventDefault();
                      }else{
                          //On effectue nos requêtes Ajax, sérialise, etc...
                          let chaine = $("form").serialize();
                      }
                      if($("#nom").val().length === 0){
                        $("#nom").after("<span>Merci de remplir ce champ</span>");
                        event.preventDefault();
                    }else{
                        //On effectue nos requêtes Ajax, sérialise, etc...
                        let chaine = $("form").serialize();
                    }
                    //............
                  });
              });
          • Explications
          • Dans la construction de votre script ne pas confondre $("form") qui va concerner tout les formulaires de votre page courante et $("#monformulaire") qui va désigner un formulaire ayant pour ID "monformulaire". Le "#" désigne un ID d’élément.
          • Ce qui donne:
          • Gérer les formulaires avec jQuery et Ajax

        • Utiliser l’objet jQuery qui est un tableau et each()
          •  $(document).ready(function(){
            // Enregistrement dans un tableau
            $selection = $("#formInscription input[type='text'],"
            +" #formInscription input[type='number'],"
            +" #formInscription input[type='email'],"
            +"#formInscription input[type='checkbox']");
            // Plus tard...
             
            // On parcourt soit avec each :
            $selection.each(function () {
                if($(this).val() === '') {
                  $(this).after("<span>Merci de remplir ce champ</span>"); 
                } else {
                    // ce champ n'est pas vide
                }
            });
             
            // Soit avec une boucle for :
            for(var i = 0; i < $selection.length; i++) {
                if($selection.eq(i).val() === '') {
                  $($selection.eq(i)).after("<span>Merci de remplir ce champ</span>");
                } else {
                    // ce champ n'est pas vide
                }
            }
            });
        • Utiliser du javascript
          • (function() {
                  'use strict';
                  window.addEventListener('load', function() {
                    let forms = document.getElementsByClassName('needs-validation');
                    let validation = Array.prototype.filter.call(forms, function(form) {
                      form.addEventListener('submit', function(event) {
                        if (form.checkValidity() === false) {
                          event.preventDefault();
                          event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                      }, false);
                    });
                  }, false);
                })();
          • Ce qui donne:
          • Gérer les formulaires avec jQuery et Ajax



Laisser un commentaire

Abonnez vous à notre chaîne YouTube gratuitement