Comment configurer la validation de formulaire jQuery de base en deux minutes –
Ce didacticiel vous montre comment configurer une validation de formulaire de base avec jQuery, illustrée par un formulaire d'inscription.
Nous allons utiliser le plug-in 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:
Premièrement, 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 dernière.
Vous pouvez utiliser l'une des options de téléchargement suivantes :
Utilisez un CDN: https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js
Inclure le plugin après jQuery:
Étape 3: créer le formulaire HTML [19659007] Pour l'enregistrement, nous souhaitons collecter les informations utilisateur suivantes:
prénom
nom
email
mot de passe
Alors, créons notre formulaire contenant ces champs de saisie:
Enregistrement
Lorsque vous intégrez cela dans une application réelle, n'oubliez pas de remplir l'attribut d'action , pour vous assurer que le formulaire est envoyé à la bonne destination.
Étape 4: créer des styles pour le formulaire
Créez un nouveau fichier, css / styles.css un et l'inclure dans la section de votre fichier HTML:
Copiez les styles suivants dans le fichier nouvellement créé:
@import url ("https://fonts.googleapis.com/css?family=Open + Sans ");
/* Modes */
* {
marge: 0;
rembourrage: 0;
}
corps {
famille de polices: "Open Sans";
taille de police: 14px;
}
.récipient {
largeur: 500 px;
marge: 25px auto;
}
forme {
rembourrage: 20px;
fond: # 2c3e50;
couleur: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
rayon-frontière: 4px;
}
étiquette de formulaire,
saisie de formulaire,
bouton de formulaire {
bordure: 0;
marge en bas: 3px;
bloc de visualisation;
largeur: 100%;
}
entrée de formulaire {
hauteur: 25px;
hauteur de ligne: 25 px;
fond: #fff;
couleur: # 000;
rembourrage: 0 6px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
dimensionnement de la boîte: border-box;
}
bouton de formulaire {
hauteur: 30 px;
hauteur de ligne: 30 px;
fond: # e67e22;
couleur: #fff;
margin-top: 10 pixels;
curseur: pointeur;
}
form .error {
couleur: # ff0000;
}
Notez les styles de .error qui seront utilisés pour les messages d'erreur de validation.
Étape 5: création des règles de validation
Enfin, nous devons initialiser le plug-in de validation de formulaire. Créez un nouveau fichier js / form-validation.js et référencez-le après la balise
Copiez le code suivant dans le fichier nouvellement créé:
// Attendez que le DOM soit prêt
$ (fonction () {
// Initialise la validation du formulaire sur le formulaire d'inscription.
// Il a l'attribut de nom "registration"
$ ("form [name='registration']"). validate ({
// Spécifiez les règles de validation
règles: {
// Le nom de la clé sur le côté gauche est l'attribut name
// d'un champ de saisie. Des règles de validation sont définies
// sur le côté droit
Prénom (obligatoire",
nom: "obligatoire",
email: {
requis: vrai,
// Spécifiez que l'e-mail doit être validé
// par la règle "e-mail" intégrée
email: vrai
},
mot de passe: {
requis: vrai,
longueur minimale: 5
}
},
// Spécifiez les messages d'erreur de validation
messages: {
prénom: "Veuillez saisir votre prénom",
nom: "Veuillez saisir votre nom",
mot de passe: {
obligatoire: "Veuillez fournir un mot de passe",
minlength: "Votre mot de passe doit contenir au moins 5 caractères"
},
e-mail: "Veuillez saisir une adresse e-mail valide"
},
// Assurez-vous que le formulaire est soumis à la destination définie
// dans l'attribut "action" du formulaire lorsqu'il est valide
submitHandler: fonction (formulaire) {
form.submit ();
}
});
});
Conclusion
Ça y est, vous avez terminé! Vous avez maintenant une idée de la configuration de la validation de formulaire avec jQuery. N'oubliez pas que cela ne remplace pas la validation côté serveur. Un utilisateur malveillant peut toujours manipuler ou contourner les règles de validation (par exemple, en utilisant les outils de développement du navigateur).
Maria Antonietta Perna est co-éditrice du canal HTML / CSS chez SitePoint et un développeur Web frontal. Elle aime bricoler avec des normes CSS sympas et est curieuse de savoir comment enseigner les approches du code frontal. Lorsqu'elle ne code pas pour le Web ou n'écrit pas pour le Web, elle aime les livres de philosophie, les longues promenades et la bonne nourriture.
