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

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 :

1. Prénom
2. Nom de famille
3. E-mail
4. 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

Source link