{"id":25509,"date":"2021-06-07T09:36:00","date_gmt":"2021-06-07T06:36:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25509"},"modified":"2021-10-18T02:08:24","modified_gmt":"2021-10-17T23:08:24","slug":"validation-de-formulaire-html-a-l-aide-de-persil","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/validation-de-formulaire-html-a-l-aide-de-persil\/","title":{"rendered":"Validation de formulaire HTML \u00e0 l’aide de persil"},"content":{"rendered":"

Vous cherchez \u00e0 appliquer des validations sur votre formulaire HTML? Les validations c\u00f4t\u00e9 client sont utiles pour garantir que tous les champs du formulaire sont remplis et dans un format appropri\u00e9. Il aide les utilisateurs \u00e0 corriger imm\u00e9diatement les donn\u00e9es invalides. Vous devriez toujours avoir des validations c\u00f4t\u00e9 client sur les formulaires de votre site Web. Si vous l’ignorez et n’appliquez que la validation c\u00f4t\u00e9 serveur, cela retarderait la soumission du formulaire en cas d’erreur.<\/p>\n

Parsley<\/a> est une biblioth\u00e8que de validation de formulaires utile et facile \u00e0 int\u00e9grer. Cette biblioth\u00e8que offre une meilleure UX par rapport aux validations HTML5 par d\u00e9faut. Vous avez besoin d’\u00e9crire quelques d\u00e9clarations et vous avez termin\u00e9. Parsley fournit un riche ensemble d’options \u00e0 l’aide desquelles vous pouvez \u00e9tendre vos validations personnalis\u00e9es. Je ne vais pas couvrir chaque option. Le but de ce tutoriel est de vous familiariser avec Parsley et de vous montrer comment appliquer les validations de base. On peut explorer leur documentation et se familiariser avec toutes les fonctionnalit\u00e9s fournies par la biblioth\u00e8que.<\/p>\n

Pour ce tutoriel, je vais cr\u00e9er un formulaire simple avec quelques champs comme le nom, l’email, le sexe, etc. Tous les champs du formulaire sont obligatoires et nous appliquerons des validations en utilisant Persil sur notre formulaire.<\/p>\n

Afin de valider le formulaire \u00e0 l’aide de Parsley, nous devons inclure son fichier JS. Je vais le faire en utilisant CDN.<\/p>\n

Parsley recommande d’utiliser votre propre style pour les messages d’erreur. Mais \u00e0 des fins de test, vous pouvez utiliser leur fichier CSS disponible sur ce lien<\/a>.<\/p>\n

Comment utiliser le persil<\/h3>\n

\u00c0 des fins de d\u00e9monstration, je vais cr\u00e9er un formulaire \u00e0 l’aide de Bootstrap. J’inclurai donc Bootstrap en utilisant CDN avec les fichiers Parsley. J’inclus \u00e9galement jQuery car le persil en d\u00e9pend.<\/p>\n

<link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.5.3\/css\/bootstrap.min.css\" \/>\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"http:\/\/parsleyjs.org\/src\/parsley.css\" \/>\n<div class=\"container\">\n\u00a0\u00a0\u00a0\u00a0<form class=\"form-horizontal\" id=\"signup_form\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"inputFirstName\" class=\"col-sm-2 control-label\">First Name<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-sm-4\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"text\" class=\"form-control\" id=\"inputFirstName\" name=\"first_name\" placeholder=\"First Name\" required>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"inputLastName\" class=\"col-sm-2 control-label\">Last Name<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-sm-4\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"text\" class=\"form-control\" id=\"inputLastName\" name=\"last_name\" placeholder=\"Last Name\" required>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"inputEmail3\" class=\"col-sm-2 control-label\">Email<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-sm-4\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"email\" class=\"form-control\" id=\"inputEmail3\" name=\"email\" placeholder=\"Email\" required>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label class=\"col-sm-2 control-label\">Gender<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-sm-4\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"gender\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"radio\" name=\"gender\" value=\"male\" required> Male\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"radio\" name=\"gender\" value=\"female\" required> Female\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label class=\"col-sm-2 control-label\">Skills<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-sm-4\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"skills\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"checkbox\" name=\"skills[]\" value=\"php\" required> PHP\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"checkbox\" name=\"skills[]\" value=\"mysql\" required> MySQL\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-sm-offset-2 col-sm-10\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button type=\"submit\" class=\"btn btn-primary\">Sign in<\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<\/form>\n<\/div>\n\u00a0\n<script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n<script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.5.3\/js\/bootstrap.min.js\"><\/script>\n<script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/parsley.js\/2.9.2\/parsley.min.js\"><\/script>\n<script type=\"text\/javascript\">\n\u00a0\u00a0\u00a0\u00a0jQuery('#signup_form').parsley();\n<\/script><\/code><\/pre>\n
Dans le code ci-dessus, j’ai inclus tous les fichiers JS et CSS requis \u00e0 l’aide de CDN. Enfin, j’ai utilis\u00e9 $('#signup_form').parsley();<\/code>o\u00f9 #signup_form est l’identifiant du formulaire. Maintenant, lorsque vous appuyez directement sur le bouton Soumettre, les erreurs s’affichent, comme indiqu\u00e9 dans la capture d’\u00e9cran ci-dessous.<\/p>\n
\"Validation<\/a><\/p>\n
Une fois toutes les erreurs corrig\u00e9es, Parsley vous permet de soumettre un formulaire que vous utilisez ensuite pour le traitement c\u00f4t\u00e9 serveur.<\/p>\n
J’esp\u00e8re que vous comprenez la validation de formulaire HTML \u00e0 l’aide de Parsley. S’il vous pla\u00eet partager vos pens\u00e9es et suggestions dans la section commentaires ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h3>\n