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>

  <script src="inscription.js"></script>

• 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> 

• 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:



• 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: