Tutoriel de validation de formulaire jQuery : exemple simple avec le plugin de validation jQuery

janvier 7, 2025

Ce didacticiel montre comment configurer un exemple simple de validation de formulaire à l’aide d’un formulaire d’inscription.

Nous utiliserons le Plugin de validation jQuery pour valider un formulaire HTML. La fonctionnalité de base de ce plugin consiste à spécifier la logique de validation et les messages d’erreur pour les éléments HTML dans le code JavaScript.

Voici une démo en direct de la validation de formulaire HTML à l’aide de jQuery que nous allons construire :

Voir le stylo
Validation du formulaire jQuery par SitePoint (@SitePoint) sur CodeStylo.

Points clés à retenir :

Tout d’abord, incluez la bibliothèque jQuery dans votre extrait de code HTML pour configurer la validation de base des entrées de formulaire avec le plugin jQuery. Vous pouvez le télécharger depuis le site officiel, utiliser un gestionnaire de packages comme Bower ou npm, ou utiliser un CDN.
Après avoir inclus jQuery, incluez le plugin de validation des données jQuery. Ce plugin vous permet de spécifier une logique de validation et des messages d’erreur pour les éléments HTML dans le code JavaScript. Par exemple, vous pouvez créer un formulaire de base avec des champs de saisie pour les informations utilisateur et utiliser le plugin pour valider ces informations.
Pour styliser le formulaire, créez un nouveau fichier CSS et incluez-le dans la section d’en-tête de votre code HTML. Ensuite, initialisez la validation jQuery lors de la soumission du formulaire dans un nouveau fichier JavaScript (JS), en spécifiant les règles de validation et les messages d’erreur de chaque champ de saisie.
N’oubliez pas que la validation côté client ne remplace pas la validation côté serveur, car un utilisateur malveillant peut toujours manipuler ou contourner les règles de validation.
Explorez des techniques avancées, telles que les méthodes de validation personnalisées, la validation en temps réel et la validation à distance pour les contrôles côté serveur.
Suivez les meilleures pratiques de sécurité en combinant la validation côté client et côté serveur pour vous protéger contre les entrées malveillantes.

Comprendre les approches de validation de formulaire

Avant de plonger dans la mise en œuvre, comparons les approches manuelles et celles du plugin de validation de données jQuery pour comprendre pourquoi le plugin de validation se démarque :

Dans l’ensemble, l’approche du plugin jQuery offre plusieurs avantages :

Méthodes de validation intégrées.
Gestion automatique des erreurs.
Comportement cohérent entre les formulaires.
Personnalisation facile.
Meilleure organisation du code.
Fonctionnalités d’accessibilité intégrées.

Puisque vous avez maintenant une compréhension de base de ce qu’est JQuery, passons aux étapes de création d’un exemple simple de validation de formulaire jQuery. Les étapes ci-dessous vous permettront de comprendre clairement comment valider un formulaire avant de le soumettre.

Étape 1 : Inclure jQuery

Tout d’abord, nous devons inclure la bibliothèque jQuery. Au moment de la rédaction, nous utilisons la dernière version, jQuery 3.7.1.

Vous pouvez utiliser l’un des éléments suivants options de téléchargement:

Téléchargez-le depuis jquery.com.
Téléchargez-le en utilisant Tonnelle: $bower installe jquery.
Téléchargez-le en utilisant npm ou fil: $ npm installez jquery ou fil ajoutez jquery.
Utilisez la dernière version compatible Version CDN.

Créez un nouveau fichier HTML nommé index.html et incluez jQuery avant la balise de fermeture :



<script src="vendor/jquery/dist/jquery.min.js"></script>

Si vous souhaitez utiliser Bower ou npm mais que vous ne les connaissez pas, ces deux articles pourraient vous intéresser :

Étape 2 : Inclure le plugin de validation jQuery

Le plugin de validation étend les capacités de jQuery avec des méthodes de validation intégrées.

Choisissez entre :

Téléchargez-le depuis le dépôt GitHub du plugin.
Téléchargez-le en utilisant Bower : $ bower install jquery-validation.
Téléchargez-le en utilisant npm : npm et jquery-validation.
NuGet: Package d’installation jQuery.Validation.
Utilisez la dernière version compatible Version CDN.

Incluez le plugin après jQuery :



<script src="vendor/jquery-validation/dist/jquery.validate.min.js"></script>

Étape 3 : Créer le fichier HTML

Dans le formulaire d’inscription, nous utiliserons les informations d’utilisateur suivantes :

Prénom
Nom de famille
E-mail
Mot de passe

Créons donc notre formulaire de base contenant ces champs de saisie :

<div class="container">
  <h2>Registration</h2>
  <form action="" name="registration">

    <label for="firstname">First Name</label>
    <input type="text" name="firstname" id="firstname" placeholder="John"/>

    <label for="lastname">Last Name</label>
    <input type="text" name="lastname" id="lastname" placeholder="Doe"/>

    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="john@doe.com"/>

    <label for="password">Password</label>
    <input type="password" name="password" id="password" placeholder="●●●●●"/>

    <button type="submit">Register</button>

  </form>
</div>

Lors de l’intégration de cela dans une application réelle, n’oubliez pas de remplir l’attribut action dans le code ci-dessus pour vous assurer que le formulaire est soumis à la bonne destination.

Étape 4 : Créer des styles pour le formulaire

Créez un nouveau fichier, css/styles.css, et incluez-le dans la section

de votre extrait de code HTML :

<link rel="stylesheet" href="css/style.css"/>

Copiez les styles suivants dans le fichier nouvellement créé :

@import url("https://fonts.googleapis.com/css?family=Open+Sans");


* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Open Sans";
  font-size: 14px;
}

.container {
  width: 500px;
  margin: 25px auto;
}

form {
  padding: 20px;
  background: #2c3e50;
  color: #fff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

form label,
form input,
form button {
  border: 0;
  margin-bottom: 3px;
  display: block;
  width: 100%;
}

form input {
  height: 25px;
  line-height: 25px;
  background: #fff;
  color: #000;
  padding: 0 6px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

form button {
  height: 30px;
  line-height: 30px;
  background: #e67e22;
  color: #fff;
  margin-top: 10px;
  cursor: pointer;
}


form .error {
  color: #ff0000;
}

Le formulaire ressemblera à celui ci-dessous après cette étape :

Note: Les styles pour .error afficheront tous les messages d’erreur.

Étape 5 : Créer la logique de validation

Enfin, nous devons initialiser le plugin de validation. Créez un nouveau fichier js/form-validation.js et référencez-le après la balise

<script src="js/form-validation.js"></script>

Copiez le code suivant dans le fichier nouvellement créé :


$(function() {
  
  
  $("form[name="registration"]").validate({
    
    rules: {
      
      
      
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        
        
        email: true
      },
      password: {
        required: true,
        minlength: 5
      }
    },
    
    messages: {
      firstname: "Please enter your firstname",
      lastname: "Please enter your lastname",
      password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
      },
      email: "Please enter a valid email address"
    },
    
    
    submitHandler: function (form) {
     form.submit();
    
  });
});

Le code ci-dessus effectuera la validation jQuery lors de la soumission du formulaire.

Techniques de validation avancées

1. Méthodes de validation personnalisées

Les méthodes de validation personnalisées permettent de créer des règles pour des scénarios qui ne sont pas couverts par les options de validation intégrées.
Le plugin fournit le $.validator.addMethod fonction pour créer de telles règles.
Le code ci-dessous montre un exemple de validation jQuery pour les caractères alphanumériques (3 à 20 caractères)

$.validator.addMethod("username", function(value, element) {
  return this.optional(element) || /^[a-zA-Z0-9]{3,20}$/.test(value);
}, "Username must be 3-20 alphanumeric characters.");

$("form[name="registration"]").validate({
  rules: {
    username: {
      required: true,
      username: true
    }
  }
});

2. Validation en temps réel

Utilisez des écouteurs d'événements tels que onkeyup, onfocusout et onclick pour déclencher des validations.
Validez uniquement les champs visibles pour améliorer la réactivité.
Utilisez la validation anti-rebond pour optimiser les performances.

$("form[name="registration"]").validate({
  onkeyup: function(element) {
    var validator = this;
    setTimeout(function() {
      validator.element(element);
    }, 300); 
  }
});

3. Validation asynchrone (à distance)

Utilisez la méthode à distance pour valider les entrées par rapport à un point de terminaison côté serveur pour des scénarios tels que la vérification du nom d'utilisateur ou de la disponibilité de l'e-mail.
Afficher les indicateurs de chargement lors de la validation.
Exemple : vérification de la disponibilité du nom d'utilisateur

rules: {
  username: {
    required: true,
    remote: {
      url: "/check-username",
      type: "post",
      data: {
        username: function() {
          return $("#username").val();
        }
      }
    }
  }
},
messages: {
  username: {
    remote: "Username is already taken."
  }
}

4. Validation conditionnelle

Définissez dynamiquement des règles en fonction de l'état du formulaire, par exemple en exigeant une adresse de livraison uniquement si une case est cochée.
Exemple : Valide le champ d'adresse uniquement lorsque la case d'expédition est cochée.

rules: {
  address: {
    required: function(element) {
      return $("#shipping").is(":checked");
    }
  }
}

5. Améliorer l'expérience utilisateur

Messages d'erreur : personnalisez les messages d'erreur et l'emplacement pour une meilleure interface utilisateur.

errorPlacement: function(error, element) {
  error.appendTo(element.parent().find(".error-container"));
}

Internationalisation : prise en charge de plusieurs langues à l'aide de messages d'erreur localisés. Vous pouvez intégrer des fichiers de langue prédéfinis à partir du plugin de validation, ou créer des fichiers de localisation personnalisés.

function loadLanguage(lang) {
  $.getScript("js/localization/messages_" + lang + ".js", function() {
    $("form[name="registration"]").validate();
  });
}


loadLanguage('fr');

6. Meilleures pratiques de sécurité

Désinfectez les entrées avant la validation pour supprimer les caractères dangereux.
Combinez la validation côté client et côté serveur pour garantir une sécurité robuste.

7. Pièges courants et solutions

Gérez les champs ajoutés dynamiquement en attachant dynamiquement des règles de validation à l'aide des sélecteurs jQuery.

$("#add-field").click(function() {
  $("#new-field").rules("add", {
    required: true,
    email: true
  });
});

Empêchez les soumissions multiples grâce à un mécanisme de verrouillage de soumission.

submitHandler: function(form) {
  $("#submit-button").prop("disabled", true);
  form.submit();
}

8. Améliorations de l'accessibilité

Utiliser les attributs ARIA (aria-invalide, aria-décrit par) pour les lecteurs d'écran.
Assurez-vous que toutes les erreurs sont correctement annoncées et navigables.

Conclusion

Ça y est, vous avez terminé ! Vous savez maintenant comment configurer la validation des données d'un formulaire avec jQuery, avec un message de validation personnalisé. Veuillez garder à l'esprit que cela ne remplace pas la validation côté serveur. Il est toujours possible qu'un utilisateur malveillant manipule ou contourne les contraintes de validation (par exemple, en utilisant les outils de développement du navigateur).

Foire aux questions (FAQ)

Qu'est-ce que la validation des données du formulaire jQuery ?

Il garantit que la saisie de l'utilisateur dans les formulaires HTML répond à des critères spécifiques avant d'être soumise à un serveur, contribuant ainsi à empêcher le traitement de données incorrectes ou incomplètes.

Pourquoi la validation des données du formulaire est-elle importante ?

La validation garantit l'exactitude des données, évite les erreurs et améliore l'expérience utilisateur. La validation des entrées utilisateur permet de maintenir l'intégrité des données et réduit la probabilité de problèmes résultant de données incorrectes ou malveillantes.

Comment effectuer la validation des données d'un formulaire à l'aide de jQuery ?

Le plugin peut être utilisé pour valider des données ou écrire du code jQuery personnalisé. Il simplifie le processus en fournissant une logique de validation et des messages d'erreur prédéfinis.

Quelles sont les contraintes de validation des données du formulaire standard ?

Les normes de validation incluent la vérification des champs obligatoires, des adresses e-mail valides (validation par e-mail), des valeurs numériques et de la complexité du mot de passe. Le plugin de validation des données jQuery propose des règles intégrées pour ces scénarios.

Puis-je créer des contraintes de validation personnalisées ?

Oui, vous pouvez créer des contraintes de validation personnalisées à l'aide du plugin de validation de données jQuery. Définissez une nouvelle méthode de validation et spécifiez son comportement, comme la vérification d'un modèle ou d'une valeur spécifique.

Comment lancer la validation des données d'un formulaire à l'aide du plugin de validation des données jQuery ?

Vous appelez généralement la méthode .validate() sur votre élément de formulaire pour lancer la validation. Le plugin de validation des données jQuery fournit cette méthode et configure les règles et comportements pour la validation.

Que se passe-t-il si un formulaire ne passe pas la validation ?

Si un formulaire ne réussit pas la validation, le plugin de validation des données jQuery empêchera sa soumission et affichera des messages d'erreur à côté des champs de saisie correspondants. Cela donnera aux utilisateurs des commentaires sur ce qui doit être corrigé.

Comment puis-je personnaliser les messages d'erreur dans la validation des données du formulaire jQuery ?

Le plugin vous permet de personnaliser les messages d'erreur pour des règles de validation spécifiques. Vous pouvez définir des messages d'erreur personnalisés dans les paramètres de validation pour chaque champ de saisie.

Puis-je utiliser la validation des données du formulaire jQuery sans le plugin de validation ?

Oui, vous pouvez effectuer une validation des données de formulaire à l'aide d'un code jQuery personnalisé sans compter sur le plugin Validation. Vous devez écrire des fonctions JavaScript qui vérifient manuellement les entrées du formulaire et affichent des messages d'erreur.

Existe-t-il des alternatives au plugin Query Validate ?

Oui, d'autres bibliothèques et frameworks de validation de formulaires sont disponibles, tels que Parsley.js et Formik (pour les applications React). De plus, HTML5 a introduit des attributs et des contraintes de validation de formulaire intégrés.

Puis-je utiliser AJAX pour valider les données d’un formulaire ?

Oui, vous pouvez utiliser AJAX avec la validation de formulaire pour effectuer une validation en temps réel ou soumettre des données de formulaire de manière asynchrone. Cela peut contribuer à améliorer l’expérience utilisateur en réduisant les rechargements de pages.

La validation des données du formulaire est-elle uniquement destinée à la validation côté client ?

La validation du formulaire peut être effectuée à la fois côté client et côté serveur. La validation côté client améliore l'expérience utilisateur, tandis que la validation côté serveur est essentielle pour empêcher les données malveillantes ou incorrectes d'atteindre le serveur.

Comment puis-je gérer la soumission du formulaire après validation ?

Si vous utilisez le plugin, il gérera automatiquement la soumission si la validation réussit. Si vous utilisez la validation personnalisée, vous pouvez soumettre manuellement le formulaire si la validation réussit.

Puis-je utiliser la validation des données du formulaire jQuery avec d'autres frameworks JavaScript ?

Oui, vous pouvez utiliser la validation de formulaire jQuery avec d'autres frameworks JavaScript. Soyez prudent quant aux conflits potentiels ou aux problèmes de compatibilité et assurez-vous d'intégrer la logique de validation de manière appropriée.

Comment mettre en œuvre efficacement la validation en temps réel ?

Pour améliorer les performances, une validation en temps réel peut être mise en œuvre avec anti-rebond. La méthode « onkeyup » est utilisée pour anti-rebond la validation des entrées.

Puis-je valider les données de manière asynchrone, comme vérifier la disponibilité du nom d'utilisateur ?

Oui, la validation des données jQuery prend en charge la validation asynchrone pour des cas tels que vérifier si un nom d'utilisateur a déjà été pris. Cela se fait en effectuant un appel API en arrière-plan et en affichant des commentaires appropriés en fonction de la réponse du serveur.

Source link