SitePoint | ISNCA

Ce tutoriel vous montre comment configurer une validation de formulaire de base avec jQuery, démontrée par un formulaire d’inscription.

Nous allons utiliser le plugin de validation jQuery pour valider notre formulaire. Le principe de base de ce plugin est de spécifier des règles de validation et des messages d’erreur pour les éléments HTML en JavaScript.

Voici une démonstration en direct de ce que nous allons construire :

Voir le stylo
jQuery Form Validation par SitePoint (@SitePoint)
sur CodePen.

Etape 1 : inclure jQuery

D’abord, nous devons inclure la bibliothèque jQuery. Le plugin de validation jQuery a été testé jusqu’à la version 3.1.1 de jQuery, mais la démo de cet article fonctionne parfaitement avec la version 3.4.1, qui est la plus récente.

Vous pouvez utiliser l’une des options de téléchargement suivantes :

Téléchargement sur jquery.com
Téléchargement à l’aide de Bower : $ bower install jquery
Téléchargez-le en utilisant npm ou Yarn : $ npm install jquery ou yarn add jquery
Utiliser un CDN : https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js

Créer un nouveau fichier HTML nommé index.html et inclure jQuery avant la balise fermante </body> :

<!-- Change the "src" attribute according to your installation path --><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 :

Gestion des paquets pour le navigateur avec Bower
Guide du débutant pour npm – le gestionnaire de paquets Node

Étape 2 : Inclure le plugin de validation jQuery

Choisissez entre :

Téléchargez-le depuis le repo github du plugin
Téléchargez-le en utilisant Bower : $ bower install jquery-validation
Téléchargez-le en utilisant npm : npm i jquery-validation
NuGet : Install-Package jQuery.Validation
Utiliser un CDN : https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js

Inclure le plugin après jQuery :

<!-- Change the "src" attribute according to your installation path --><script src="vendor/jquery-validation/dist/jquery.validate.min.js"></script>

Etape 3 : créer le formulaire HTML

Pour l’inscription, nous voulons recueillir les informations suivantes sur l’utilisateur :

prénom
nom
email
mot de passe

Créons donc notre formulaire 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" placeholder="John"/> <label for="lastname">Last Name</label> <input type="text" name="lastname" placeholder="Doe"/> <label for="email">Email</label> <input type="email" name="email" placeholder="[email protected]"/> <label for="password">Password</label> <input type="password" name="password" placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;"/> <button type="submit">Register</button> </form></div>

Lorsque vous l’intégrerez dans une application réelle, n’oubliez pas de remplir l’attribut action, pour vous assurer que le formulaire est soumis à la bonne destination.

Etape 4 : créer des styles pour le formulaire

Créer un nouveau fichier, css/styles.css, et l’inclure dans la section <head> de votre fichier 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");/* Styles */* { 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;}

Notez les styles pour .error, qui seront utilisés pour les messages d’erreur de validation.

Etape 5 : créer les règles de validation

Enfin, nous devons initialiser le plugin de validation de formulaire. Créez un nouveau fichier js/form-validation.js et référencez-le après la balise <script> du plugin jQuery Validation :

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

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

// Wait for the DOM to be ready$(function() { // Initialize form validation on the registration form. // It has the name attribute "registration" $("form").validate({ // Specify validation rules rules: { // The key name on the left side is the name attribute // of an input field. Validation rules are defined // on the right side firstname: "required", lastname: "required", email: { required: true, // Specify that email should be validated // by the built-in "email" rule email: true }, password: { required: true, minlength: 5 } }, // Specify validation error messages 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" }, // Make sure the form is submitted to the destination defined // in the "action" attribute of the form when valid submitHandler: function(form) { form.submit(); } });});

Conclusion

C’est tout, vous avez terminé ! Vous avez maintenant une idée de la façon de mettre en place la validation de formulaire avec jQuery. Gardez à l’esprit que cela ne remplace pas la validation côté serveur. Il est toujours possible pour un utilisateur malintentionné de manipuler ou de contourner les règles de validation (par exemple, en utilisant les outils de développement du navigateur).

Comment configurer une validation de formulaire jQuery de base en deux minutes