Libellés

set Custom Validity : Validation de formulaire asynchrone avec AJAX (JavaScript ou JQuery) et PHP

Le fichier PHP : check-email-available.php

Ce code nous permet de savoir si l'adresse email est disponible. Si l'email est dans la liste, il n'est pas disponible.

<?php
//La liste devrait être remplie avec les emails de la base de données
$email_list = array("test@gmail.com", "test@yahoo.com", "test@outlook.com");

if (isset($_POST["email"])) {
    $email = $_POST["email"];
    // Si l'email est dans la liste, il n'est pas disponible
    echo in_array($email, $email_list) ? "L'email n'est pas disponible" : "";
}

AJAX JavaScript : XMLHttpRequest

Un appel asynchrone avec JavaScript en utilisant l'objet XMLHttpRequest

On utilise la méthode setCustomValidity pour afficher le message de validation du champ du formulaire.

 //Avec XMLHttpRequest
 function checkEmail(element) {
     var xhttp = new XMLHttpRequest();

     var url = "check-email-available.php";
     var parameters = "email=" + element.value;

     //methode POST
     xhttp.open("POST", url, true);
     xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

     xhttp.onreadystatechange = function() {
         //Si aucune erreur HTTP
         if (xhttp.readyState == 4 && xhttp.status == 200) {
             //On montre le message retourné par le code PHP
             element.setCustomValidity(xhttp.responseText);
         }
     }
     xhttp.send(parameters);
 }

AJAX avec JQuery

//Avec JQuery
function checkEmailJQuery(element) {
    $.post("check-email-available.php", {
            email: element.value
        })
        .done(function(response) {
            //On montre le message retourné par le code PHP
            element.setCustomValidity(response);
        });
}

Code complet

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

<body>
    <form action="">
        <!-- Modifier la fonction à appeler -->
        <input name="email" onchange="checkEmail(this)"></input>
        <button>OK</button>
    </form>

    <script>

        //Avec XMLHttpRequest
        function checkEmail(element) {
            var xhttp = new XMLHttpRequest();

            var url = "check-email-available.php";
            var parameters = "email=" + element.value;
            
            //methode POST
            xhttp.open("POST", url, true);
            xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

            xhttp.onreadystatechange = function () {
                //Si aucune erreur HTTP
                if (xhttp.readyState == 4 && xhttp.status == 200) {
                    //On montre le message retourné par le code PHP
                    element.setCustomValidity(xhttp.responseText);
                }
            }
            xhttp.send(parameters);
        }

        //Avec JQuery
        function checkEmailJQuery(element) {
            $.post("check-email-available.php", { email: element.value })
                .done(function (response) {
                     //On montre le message retourné par le code PHP
                    element.setCustomValidity(response);
                });
        }

    </script>
</body>

</html>
Envoyer l'article par e-mail
Libellés :

Commentaires

Enregistrer un commentaire