Comment Soumettre des formulaires AJAX avec jQuery
Introduction
jQuery peut être associé à la soumission de formulaires pour gérer la validation. Cela a l’avantage de fournir aux utilisateurs des commentaires sur toute erreur dans leur entrée.
Dans ce tutoriel, on vous présentera un exemple de formulaire qui communique avec un backend PHP. Le formulaire utilisera jQuery pour traiter un formulaire sans actualisation de page (en utilisant AJAX), indiquer les erreurs et afficher également un message de réussite.
Prérequis
Pour terminer ce tutoriel, vous aurez besoin de:
- Ce tutoriel suppose que PHP est installé localement et que vous êtes capable d’exécuter le serveur Web intégré. Vous pourrez peut-être consulter l’un de nos tutoriels pour installer PHP dans votre environnement.
- Une certaine familiarité avec les sélecteurs et les méthodes de la bibliothèque jQuery.
- Une certaine familiarité avec les classes de la bibliothèque Bootstrap.
- Un éditeur de code.
- Un navigateur web moderne.
Remarque: Ce tutoriel ne spécifie pas les dernières versions de jQuery (actuellement 3.5.1) ou Bootstrap (actuellement 5.0.0-beta1). Cependant, de nombreuses leçons de ce tutoriel concernent toujours les dernières versions.
Ce tutoriel a été vérifié avec PHP v7.3.24, jQuery v2.0.3 et Bootstrap v3.0.3.
Étape 1 – Construction du Backend avec PHP
Pour les besoins de ce tutoriel, le backend sera écrit en PHP.
Tout d’abord, ouvrez une fenêtre de terminal et créez un nouveau répertoire de projet:
- mkdir jquery-form-validation
Accédez à ce nouveau répertoire de projet:
- cd jquery-form-validation
Ensuite, utilisez votre éditeur de code pour créer un nouveau fichier process.php:
<?php$errors = ;$data = ;if (empty($_POST)) { $errors = 'Name is required.';}if (empty($_POST)) { $errors = 'Email is required.';}if (empty($_POST)) { $errors = 'Superhero alias is required.';}if (!empty($errors)) { $data = false; $data = $errors;} else { $data = true; $data = 'Success!';}echo json_encode($data); Ce fichier prendra des valeurs pour name, email et superheroAlias. Si l’une de ces valeurs n’est pas fournie, un message d’erreur sera renvoyé. De nombreuses autres validations pourraient être effectuées à ce stade, mais aux fins de ce tutoriel, vous vous assurerez uniquement que ces entrées requises ont été fournies. Sinon, si une valeur pour name, email et superheroAlias est présente, un message de réussite sera renvoyé.
Remarque: Dans un scénario réel, le backend serait également responsable d’autres tâches telles que la prise des données et l’enregistrement des modifications dans une base de données, la création d’une session ou l’envoi d’un e-mail.
Maintenant que le traitement du formulaire est terminé, vous pouvez créer le formulaire.
Étape 2 – Construction du Frontend avec HTML et CSS
Aux fins de ce tutoriel, Bootstrap sera utilisé pour générer les vues.
Dans votre répertoire de projet, utilisez votre éditeur de code pour créer un fichier index.html: index
<!DOCTYPE html><html> <head> <title>jQuery Form Example</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script></head> <body> <div class="col-sm-6 col-sm-offset-3"> <h1>Processing an AJAX Form</h1> <form action="process.php" method="POST"> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" name="name" placeholder="Full Name" /> </div> <div class="form-group"> <label for="email">Email</label> <input type="text" class="form-control" name="email" placeholder="[email protected]" /> </div> <div class="form-group"> <label for="superheroAlias">Superhero Alias</label> <input type="text" class="form-control" name="superheroAlias" placeholder="Ant Man, Wonder Woman, Black Panther, Superman, Black Widow" /> </div> <button type="submit" class="btn btn-success"> Submit </button> </form> </div> </body></html> La version CDN (content delivery network) de Bootstrap et jQuery sera référencée. Le formulaire action sera défini sur le fichier PHP créé précédemment. Le formulaire sera composé de champs pour name, email et superheroAlias. Le formulaire aura également besoin d’un bouton d’envoi.
Ouvrez une fenêtre de terminal et accédez au répertoire du projet. Et exécutez le serveur PHP:
- php -S localhost:8000
Visitez localhost:8000 dans votre navigateur Web et observez ce qui suit:
Maintenant que vous avez rempli le formulaire, vous pouvez créer le script pour gérer la soumission du formulaire.
Étape 3 – Gestion de la logique de soumission de formulaire en JavaScript et jQuery
Pour soumettre un formulaire via AJAX, votre script devra gérer quatre tâches:
- Capturez le bouton Soumettre le formulaire afin que l’action par défaut n’ait pas lieu.
- Récupère toutes les données du formulaire à l’aide de jQuery.
- Soumettez les données du formulaire en utilisant AJAX.
- Erreurs d’affichage s’il y en a.
Dans votre répertoire de projet, utilisez votre éditeur de code pour créer un nouveau fichier form.js :
$(document).ready(function () { $("form").submit(function (event) { var formData = { name: $("#name").val(), email: $("#email").val(), superheroAlias: $("#superheroAlias").val(), }; $.ajax({ type: "POST", url: "process.php", data: formData, dataType: "json", encode: true, }).done(function (data) { console.log(data); }); event.preventDefault(); });}); Ce code récupère les données des champs name, email et superheroAlias. Il effectue ensuite une requête AJAX à process.php avec une charge utile de données de formulaire. Après une connexion réussie, la console enregistrera les données de réponse. event.preventDefault() est utilisé pour empêcher le formulaire de se comporter par défaut en rechargeant la page lors de la soumission.
Après avoir enregistré vos modifications dans form.js, revisitez le fichier index.html avec votre éditeur de code. Ajouter une référence au nouveau fichier JavaScript:
<!DOCTYPE html><html> <head> <title>jQuery Form Example</title> <!-- ... --> <script src="form.js"></script></head><!-- ... --> Maintenant, lorsqu’un utilisateur appuie sur le bouton Soumettre du formulaire, le code JavaScript récupère toutes les valeurs d’entrée et envoie une requête POST à process.php.
Remarque : Vous utiliserez le rappel .done pour gérer une requête AJAX réussie. Cela s’appelait auparavant .success, mais cela a depuis été obsolète dans jQuery 1.8+.
Une autre alternative consiste à utiliser serialize au lieu de tirer les informations du formulaire individuellement.
Le script PHP traitera les entrées envoyées par l’appel AJAX et renverra le tableau $data créé. Vous pouvez l’observer dans la console de votre navigateur après avoir soumis votre formulaire:
Maintenant que la logique du formulaire est terminée, vous pouvez créer le script pour gérer les erreurs de formulaire.
Étape 4 – Affichage des erreurs de validation de formulaire
Dans le script PHP, le code vérifie que tous les champs sont obligatoires. Si un champ n’est pas présent, une erreur est renvoyée.
Revisitez form.js et ajoutez les lignes de code en surbrillance suivantes :
// ... $.ajax({ type: "POST", url: "process.php", data: formData, dataType: "json", encode: true, }).done(function (data) { console.log(data); if (!data.success) { if (data.errors.name) { $("#name-group").addClass("has-error"); $("#name-group").append( '<div class="help-block">' + data.errors.name + "</div>" ); } if (data.errors.email) { $("#email-group").addClass("has-error"); $("#email-group").append( '<div class="help-block">' + data.errors.email + "</div>" ); } if (data.errors.superheroAlias) { $("#superhero-group").addClass("has-error"); $("#superhero-group").append( '<div class="help-block">' + data.errors.superheroAlias + "</div>" ); } } else { $("form").html( '<div class="alert alert-success">' + data.message + "</div>" ); } }); event.preventDefault(); });// ... Ce code vérifie si la réponse contient une erreur pour chaque champ. Si une erreur est présente, il ajoute une classe has-error et ajoute le message d’erreur.
Maintenant, revisitez votre formulaire dans un navigateur Web et expérimentez la soumission de données avec le formulaire.
S’il y a des erreurs qui reviennent du serveur, le formulaire fournira des commentaires sur les champs obligatoires:
Et s’il n’y a aucune erreur qui revient du serveur, le formulaire fournira des commentaires pour une soumission réussie:
Chaque fois que nous soumettons le formulaire, nos erreurs de notre soumission précédente sont toujours là. Vous devrez les effacer en les supprimant dès que le formulaire sera à nouveau soumis.
Revisitez form.js et ajoutez les lignes de code en surbrillance suivantes:Formulaire
// ... $("form").submit(function (event) { $(".form-group").removeClass("has-error"); $(".help-block").remove(); // ... });// ... Ce code supprimera la classe has-error de tous les éléments .form-group. Il supprimera également tous les éléments .help-block contenant des messages d’erreur.
Étape 5 – Affichage des erreurs de connexion au serveur
S’il y a une erreur de connexion au serveur, il n’y aura pas de réponse JSON de l’appel AJAX. Pour empêcher les utilisateurs d’attendre une réponse qui n’arrivera jamais, vous pouvez fournir un message d’erreur en cas d’échec de connexion.
Revisitez form.js et ajoutez les lignes de code en surbrillance suivantes :
// ... $.ajax({ type: "POST", url: "process.php", data: formData, dataType: "json", encode: true, }) .done(function(data) { // ... }) .fail(function (data) { $("form").html( '<div class="alert alert-danger">Could not reach server, please try again later.</div>' ); });// ...Si le serveur est en panne ou en panne pour une raison quelconque, un utilisateur qui tente de soumettre un formulaire recevra un message d’erreur:
Maintenant que le message d’erreur du serveur est terminé, vous avez rempli l’exemple de formulaire.
En utilisant $.poster au lieu de $.ajax
jQuery fournit également une méthode abrégée $.post comme alternative à $.ajax.
Le code $.ajax dans form.js pourrait être réécrit avec $.post:
$.post('process.php', function(formData) { // place success code here}) .fail(function(data) { // place error code here }); L’avantage de $.post est qu’il ne nécessite pas autant de configuration de connexion pour être déclaré.
Conclusion
Dans cet article, vous avez créé un exemple de formulaire qui communique à un backend PHP avec jQuery et affiche toutes les erreurs dans le formulaire.
Dans la prochaine étape, vous souhaiterez explorer des validations plus complexes telles que des adresses e-mail et des dates valides. Vous pouvez également être intéressé par l’application de validations côté client qui fonctionnent dans le navigateur.
Si vous souhaitez en savoir plus sur JavaScript, consultez notre page thématique JavaScript pour des exercices et des projets de programmation.