Logique de validation des formulaires côté client
Mettez en œuvre des règles avancées de validation côté client, fournissez un retour immédiat aux utilisateurs et garantissez l’intégrité des données avant l’envoi grâce à une validation jQuery personnalisée.
Logique de validation des formulaires côté client est une leçon jQuery Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage jQuery Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours jQuery Academy comprend 3 leçons au total.
Pourquoi valider les formulaires côté client ?
La validation des formulaires côté client vérifie les données saisies par l'utilisateur avant leur envoi au serveur. Il s'agit d'une étape essentielle pour créer des applications web faciles à utiliser.
- Meilleure expérience utilisateur : les utilisateurs reçoivent immédiatement un retour en cas d'erreur, ce qui leur permet de corriger leurs saisies sans attendre la réponse du serveur.
- Réduction de la charge du serveur : les données non valides sont détectées rapidement, ce qui évite à votre serveur de traiter des requêtes inutiles.
- Interactions plus rapides : l'absence de rechargement de la page rend l'utilisation du formulaire plus fluide et plus réactive.
Au-delà de la validation HTML5 de base
HTML5 propose des attributs de validation de base comme required, type="email" et pattern. Bien qu'ils soient utiles, ils manquent souvent de souplesse pour gérer des règles métier complexes ou des messages personnalisés.
Par exemple, HTML5 ne permet pas facilement de vérifier qu'un mot de passe respecte certains critères de robustesse (par exemple, au moins 8 caractères, un chiffre et un symbole) ou que deux champs de mot de passe correspondent. C'est là que jQuery intervient !
Intercepter l'envoi d'un formulaire
La première étape d'une validation personnalisée consiste à empêcher l'envoi par défaut du formulaire par le navigateur. Pour cela, nous utilisons le gestionnaire d'événements .submit() de jQuery ainsi que event.preventDefault().
Nous pouvons ainsi exécuter d'abord notre logique de validation. Si le formulaire est valide, nous pouvons ensuite l'envoyer manuellement (ou l'envoyer via AJAX, ce que nous verrons dans une autre leçon).
<!-- HTML part (imagine this exists) -->
<form id="myForm">
<input type="text" id="username" required>
<button type="submit">Submit</button>
</form>
<script>
$(document).ready(function() {
$('#myForm').submit(function(event) {
// Stop the form from submitting normally
event.preventDefault();
console.log("Form submission intercepted!");
// Here, you'd add your validation logic
});
});
</script>Structurer une fonction de validation personnalisée
Il est recommandé d'encapsuler votre logique de validation dans une fonction réutilisable. Cette fonction peut renvoyer true si le formulaire est valide et false dans le cas contraire.
Vous pouvez ensuite appeler cette fonction dans le gestionnaire d'événements submit de votre formulaire afin de décider s'il faut poursuivre l'envoi.
<!-- HTML part -->
<form id="loginForm">
<input type="text" id="email" placeholder="Email">
<button type="submit">Login</button>
</form>
<script>
function validateLoginForm() {
let isValid = true;
const email = $('#email').val();
if (email === '' || !email.includes('@')) {
console.log("Invalid email!");
isValid = false;
}
// More validation checks here...
return isValid;
}
$(document).ready(function() {
$('#loginForm').submit(function(event) {
event.preventDefault();
if (validateLoginForm()) {
console.log("Form is valid! Submitting...");
// $(this).off('submit').submit(); // To submit programmatically
} else {
console.log("Form has errors. Please fix.");
}
});
});
</script>Valider la longueur d'un champ de texte
Une règle de validation courante consiste à vérifier la longueur minimale ou maximale d'une saisie textuelle. Pour cela, il suffit de récupérer la valeur .val() d'un champ et de vérifier sa propriété .length.
Imposons une longueur minimale de 5 caractères pour le nom d'utilisateur.
<!-- HTML part -->
<form id="userForm">
<input type="text" id="username" placeholder="Username">
<button type="submit">Create User</button>
</form>
<script>
function validateUsernameLength() {
const username = $('#username').val();
if (username.length < 5) {
console.log("Username must be at least 5 characters long.");
return false;
}
return true;
}
$(document).ready(function() {
$('#userForm').submit(function(event) {
event.preventDefault();
if (validateUsernameLength()) {
console.log("Username is valid!");
} else {
console.log("Validation failed.");
}
});
});
</script>Fournir un retour immédiat à l'utilisateur
Il ne suffit pas de consigner les erreurs dans la console ! Nous devons afficher un retour clair et immédiat directement sur la page. Vous pouvez ajouter des messages d'erreur à côté des champs ou mettre en évidence les saisies non valides.
Nous allons ajouter un élément <span> pour afficher un message d'erreur lorsque le nom d'utilisateur est trop court.
<!-- HTML part -->
<form id="userFormFeedback">
<label for="usernameFeedback">Username:</label>
<input type="text" id="usernameFeedback" placeholder="Min 5 chars">
<span id="usernameError" style="color: red;"></span>
<button type="submit">Create User</button>
</form>
<script>
$(document).ready(function() {
$('#userFormFeedback').submit(function(event) {
event.preventDefault();
const username = $('#usernameFeedback').val();
const $errorSpan = $('#usernameError');
if (username.length < 5) {
$errorSpan.text("Username too short!");
$('#usernameFeedback').css('border', '1px solid red');
} else {
$errorSpan.text("");
$('#usernameFeedback').css('border', '');
console.log("Username is valid!");
}
});
});
</script>Valider une adresse e-mail avec des expressions régulières
Pour rechercher des motifs complexes, comme les formats d'adresse e-mail, les expressions régulières sont particulièrement utiles. La méthode RegExp.test() de JavaScript convient parfaitement à cette tâche.
Une expression régulière simple pour les e-mails peut vérifier la présence de caractères, du symbole « @ » et d'un domaine. Gardez à l'esprit qu'une expression régulière très stricte pour les e-mails peut devenir excessivement complexe : recherchez donc un équilibre.
<!-- HTML part -->
<form id="emailForm">
<label for="userEmail">Email:</label>
<input type="text" id="userEmail" placeholder="your@example.com">
<span id="emailError" style="color: red;"></span>
<button type="submit">Subscribe</button>
</form>
<script>
$(document).ready(function() {
$('#emailForm').submit(function(event) {
event.preventDefault();
const email = $('#userEmail').val();
const $errorSpan = $('#emailError');
// Basic email regex: something@something.something
const emailRegex = /^[\w.-]+@[\w.-]+\.[a-zA-Z]{2,6}$/;
if (!emailRegex.test(email)) {
$errorSpan.text("Invalid email format.");
$('#userEmail').css('border', '1px solid red');
} else {
$errorSpan.text("");
$('#userEmail').css('border', '');
console.log("Email is valid!");
}
});
});
</script>Validation d'une plage numérique
Vous devez parfois vérifier qu'un nombre se situe dans une plage donnée (par exemple, un âge compris entre 18 et 65 ans ou une quantité comprise entre 1 et 100). Nous pouvons convertir la valeur saisie en nombre et effectuer de simples comparaisons.
N'oubliez jamais de convertir une saisie textuelle en nombre avec parseInt() ou parseFloat() avant d'effectuer des comparaisons numériques.
<!-- HTML part -->
<form id="ageForm">
<label for="userAge">Your Age:</label>
<input type="number" id="userAge" placeholder="Enter age">
<span id="ageError" style="color: red;"></span>
<button type="submit">Submit Age</button>
</form>
<script>
$(document).ready(function() {
$('#ageForm').submit(function(event) {
event.preventDefault();
const ageInput = $('#userAge').val();
const age = parseInt(ageInput, 10); // Convert to integer
const $errorSpan = $('#ageError');
if (isNaN(age) || age < 18 || age > 65) {
$errorSpan.text("Age must be between 18 and 65.");
$('#userAge').css('border', '1px solid red');
} else {
$errorSpan.text("");
$('#userAge').css('border', '');
console.log("Age is valid!");
}
});
});
</script>Combiner plusieurs règles de validation
Les formulaires nécessitent souvent plusieurs règles de validation pour un même champ ou pour plusieurs champs. Vous pouvez enchaîner ces vérifications dans votre fonction de validation.
Une approche courante consiste à supposer que la saisie est valide, puis à définir isValid = false si une règle échoue. Vous pouvez ainsi regrouper toutes les erreurs avant de les afficher à l'utilisateur.
- Appelez des fonctions d'aide dédiées à chaque validation.
- Stockez les résultats dans un indicateur booléen.
- Affichez tous les messages d'erreur pertinents.
Vérifiez vos compétences en validation
Considérez un champ de formulaire « Code produit » qui doit respecter deux règles :
- Il doit comporter exactement 6 caractères.
- Il doit contenir uniquement des lettres majuscules et des chiffres (A-Z, 0-9).
Quel extrait jQuery valide correctement le champ de saisie productCode et affiche un message d'erreur ?
Récapitulatif : validation côté client
Dans cette leçon, vous avez appris à mettre en œuvre une validation robuste des formulaires côté client avec jQuery. Nous avons abordé :
- l'importance de la validation côté client pour l'expérience utilisateur et les performances ;
- l'interception de l'envoi des formulaires avec
event.preventDefault(); - la structuration de fonctions de validation personnalisées ;
- la mise en œuvre de règles pour la longueur des textes, les motifs d'adresses e-mail et les plages numériques ;
- la fourniture d'un retour clair et immédiat aux utilisateurs.
La maîtrise de ces techniques vous aidera à créer des formulaires plus interactifs et plus résistants aux erreurs !
Questions Fréquemment Posées
La leçon « Logique de validation des formulaires côté client » est-elle gratuite ?
Oui — le texte complet de « Logique de validation des formulaires côté client » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours jQuery Academy, passe à CoddyKit PRO. Le cours jQuery Academy comprend 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Logique de validation des formulaires côté client » ?
Mettez en œuvre des règles avancées de validation côté client, fournissez un retour immédiat aux utilisateurs et garantissez l’intégrité des données avant l’envoi grâce à une validation jQuery person… Tu pratiques jQuery Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer jQuery Academy ?
Aucune expérience préalable n'est requise. jQuery Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 3.
Combien de temps prend la leçon « Logique de validation des formulaires côté client » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon jQuery Academy ?
Oui. Chaque leçon jQuery Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Manipulation dynamique des champs de formulaire
- Logique de validation des formulaires côté client
- Envoi de formulaires AJAX et retour utilisateur