Validation de formulaire à l’aide d’Ajax

• La validation côté serveur se heurte aux limites du protocole HTTP, qui est un protocole sans état. À moins qu’un code spécial ne soit écrit pour résoudre ce problème, l’envoi d’une page contenant des données invalides entraîne en retour un formulaire vide que l’utilisateur doit et nouveau remplir intégralement ; un fonctionnement plutôt ennuyeux.
• Après avoir soumis la page, l’utilisateur doit attendre patiemment qu’elle soit intégralement rechargée. Pour chaque erreur de saisie dans le formulaire, l’ennuyeux rechargement d’une page contenant un formulaire vide se répète.

• Lien à utiliser pour appeler JQUERY

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

• Réalisation du formulaire

<div style="margin:20px">
    <h6>Application AJAX</h6>
    <hr class="w-75">
    <form class="row g-3">
        <div class="col-md-4">
            <label for="nomPrenom" class="form-label">Prénom</label>
            <input type="text" class="form-control is-invalid" name="nomPrenom_check" id="nomPrenom" value="" required>
            <div class="invalid-feedback">
            Veuillez entrer votre Prénom.
            </div>
        </div>
        <div class="col-md-4">
            <label for="validationServer02" class="form-label">Nom de famille</label>
            <input type="text" class="form-control is-invalid" id="validationServer02" value="" required>
            <div class="invalid-feedback">
            Veuillez entrer votre nom de famille.
            </div>
        </div>
    </form>
</div>

• Cette validation se produit lorsqu’une touche du clavier est relâchée d’un champ du formulaire (keyup).
• La valeur du champ est envoyée immédiatement au serveur, qui l’évalue et renvoie un résultat (0 pour un échec, 1 pour une réussite).
• Si la validation échoue, un message d’erreur est affiché et avertit l’utilisateur de l’échec de la validation.

Le keyup () est une méthode intégrée dans jQuery qui est utilisée pour déclencher l’événement keyup chaque fois que l’utilisateur relâche une touche du clavier. Ainsi, en utilisant la méthode keyup (), nous pouvons détecter si une touche est relâchée du clavier.

$(document).ready(function() {
  $('#nomPrenom').keyup(function() {
    //On vérifie si le nom et le prénom est ok ou n'a pas été déjà pris
                verifier_nomPrenom();
  });
});
function verifier_nomPrenom(){
    $.ajax({
        type: "post",
        url:  "verifier.php",
        data: {
            'nomPrenom_check' : $("#nomPrenom").val(),
        },
        success: function(data){
                    if(data == "success"){
                        $("#nomPrenom").removeClass("is-invalid");
                        $("#nomPrenom").addClass("is-valid");
                        } else {
                        $("#nomPrenom").removeClass("is-valid");
                        $("#nomPrenom").addClass("is-invalid");   
                    }
                 }
    });
}

Explication du code utilisé :

• url : est le seul paramètre obligatoire. Cette chaîne contient l’adresse à laquelle envoyer la requête. Les données retournées seront ignorées si aucun autre paramètre n’est spécifié
• data : Un objet simple ou une chaîne qui est envoyé au serveur avec la requête.
• success : Une fonction de rappel qui est exécutée si la requête réussit. Elle prend en argument les données renvoyées. Il reçoit également le statut textuel de la réponse.
• dataType : Le type de données attendu du serveur. La valeur par défaut est Intelligent Guess (xml, json, script, texte, html). si ce paramètre est fourni, le rappel de réussite doit également être fourni.

Style PHP (côté serveur) :

• Cette validation classique effectuée sur le serveur lorsque le formulaire est envoyé s’assure que les données saisies par l’utilisateur respectent certaines règles.
• Si aucune erreur n’est trouvée et si les données sont valides, le navigateur est redirigé vers une page indiquant la réussite de la soumission (verifier.php).
• Si la validation échoue, l’utilisateur reçoit à nouveau le formulaire, mais dont les champs invalides sont repérés.

<?php 
//Vérification du nom prénom
if(!empty($_POST['nomPrenom_check'])){ 
	$nomPrenom = $_POST['nomPrenom_check'];
	$nomPrenom = preg_replace('#[^a-z0-9]#i', '', $nomPrenom); // filter everything but letters and numbers
	if(strlen($nomPrenom) < 6 || strlen($nomPrenom) > 20){
		echo '<br/>6 à 20 caractètres SVP.';
	} else {
		echo 'success';
		exit();
	}
}
?>