{"id":25454,"date":"2021-06-07T09:50:00","date_gmt":"2021-06-07T06:50:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25454"},"modified":"2021-10-18T02:33:39","modified_gmt":"2021-10-17T23:33:39","slug":"html-formularvalidierung-mit-petersilie","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/html-formularvalidierung-mit-petersilie\/","title":{"rendered":"HTML-Formularvalidierung mit Petersilie"},"content":{"rendered":"<p>Suchen Sie nach Validierungen f\u00fcr Ihr HTML-Formular? Clientseitige Validierungen sind hilfreich, um sicherzustellen, dass alle Formularfelder ausgef\u00fcllt und im richtigen Format vorliegen. Es hilft Benutzern, ung\u00fcltige Daten sofort zu beheben. Sie sollten immer clientseitige Validierungen in Ihren Website-Formularen haben. Wenn Sie es \u00fcberspringen und nur die serverseitige Validierung anwenden, w\u00fcrde dies die Formular\u00fcbermittlung im Falle von Fehlern verz\u00f6gern.<\/p>\n<p><a href=\"https:\/\/parsleyjs.org\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Petersilie<\/a> ist eine n\u00fctzliche Bibliothek zur Formularvalidierung, die einfach zu integrieren ist. Diese Bibliothek bietet eine bessere UX im Vergleich zu standardm\u00e4\u00dfigen HTML5-Validierungen. Sie brauchen nur ein paar Statements zu schreiben und schon sind Sie fertig. Petersilie bietet eine Vielzahl von Optionen, mit denen Sie Ihre benutzerdefinierten Validierungen erweitern k\u00f6nnen. Ich werde nicht jede Option behandeln. Der Zweck dieses Tutorials besteht darin, Sie mit Petersilie vertraut zu machen und Ihnen zu zeigen, wie Sie grundlegende Validierungen anwenden. Man kann ihre Dokumentation durchsuchen und sich mit allen Funktionen der Bibliothek vertraut machen.<\/p>\n<p>F\u00fcr dieses Tutorial werde ich ein einfaches Formular mit wenigen Feldern wie Name, E-Mail, Geschlecht usw. erstellen. Alle Formularfelder sind obligatorisch und wir werden Validierungen mit Petersilie auf unser Formular anwenden.<\/p>\n<p>Um das Formular mit Petersilie zu validieren, m\u00fcssen wir seine JS-Datei einschlie\u00dfen. Ich werde es mit CDN tun.<\/p>\n<p>Petersilie empfiehlt, f\u00fcr Fehlermeldungen Ihr eigenes Styling zu verwenden. Zu Testzwecken k\u00f6nnen Sie jedoch die unter <a href=\"https:\/\/parsleyjs.org\/src\/parsley.css\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">diesem Link<\/a> verf\u00fcgbare CSS-Datei verwenden .<\/p>\n<h3>Verwendung von Petersilie<\/h3>\n<p>F\u00fcr Demozwecke werde ich ein Formular mit Bootstrap erstellen. Also werde ich Bootstrap mit CDN zusammen mit Parsley-Dateien einbinden. Ich schlie\u00dfe auch jQuery ein, da Petersilie davon abh\u00e4ngt.<\/p>\n<pre><code>&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.5.3\/css\/bootstrap.min.css\" \/&gt;\n&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"http:\/\/parsleyjs.org\/src\/parsley.css\" \/&gt;\n&lt;div class=\"container\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;form class=\"form-horizontal\" id=\"signup_form\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"form-group\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;label for=\"inputFirstName\" class=\"col-sm-2 control-label\"&gt;First Name&lt;\/label&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-sm-4\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"text\" class=\"form-control\" id=\"inputFirstName\" name=\"first_name\" placeholder=\"First Name\" required&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"form-group\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;label for=\"inputLastName\" class=\"col-sm-2 control-label\"&gt;Last Name&lt;\/label&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-sm-4\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"text\" class=\"form-control\" id=\"inputLastName\" name=\"last_name\" placeholder=\"Last Name\" required&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"form-group\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;label for=\"inputEmail3\" class=\"col-sm-2 control-label\"&gt;Email&lt;\/label&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-sm-4\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"email\" class=\"form-control\" id=\"inputEmail3\" name=\"email\" placeholder=\"Email\" required&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"form-group\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;label class=\"col-sm-2 control-label\"&gt;Gender&lt;\/label&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-sm-4\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"gender\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"radio\" name=\"gender\" value=\"male\" required&gt; Male\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"radio\" name=\"gender\" value=\"female\" required&gt; 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&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"form-group\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;label class=\"col-sm-2 control-label\"&gt;Skills&lt;\/label&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-sm-4\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"skills\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"checkbox\" name=\"skills[]\" value=\"php\" required&gt; PHP\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"checkbox\" name=\"skills[]\" value=\"mysql\" required&gt; MySQL\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"form-group\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-sm-offset-2 col-sm-10\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button type=\"submit\" class=\"btn btn-primary\"&gt;Sign in&lt;\/button&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;\/form&gt;\n&lt;\/div&gt;\n\u00a0\n&lt;script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"&gt;&lt;\/script&gt;\n&lt;script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.5.3\/js\/bootstrap.min.js\"&gt;&lt;\/script&gt;\n&lt;script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/parsley.js\/2.9.2\/parsley.min.js\"&gt;&lt;\/script&gt;\n&lt;script type=\"text\/javascript\"&gt;\n\u00a0\u00a0\u00a0\u00a0jQuery('#signup_form').parsley();\n&lt;\/script&gt;<\/code><\/pre>\n<p>In den obigen Code habe ich alle erforderlichen JS- und CSS-Dateien mit CDN eingef\u00fcgt. Schlie\u00dflich habe ich verwendet, <code>$('#signup_form').parsley();<\/code>wo #signup_form die Formular-ID ist. Wenn Sie jetzt direkt auf die Schaltfl\u00e4che Senden klicken, werden die Fehler angezeigt, wie im Screenshot unten gezeigt.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20309-6081dc1dbb937.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20309-6081dc1dbb937.png\" alt=\"HTML-Formularvalidierung mit Petersilie\" ><\/a><\/p>\n<p>Sobald alle Fehler behoben sind, erm\u00f6glicht Parsley Ihnen, ein Formular zu senden, das Sie dann zur serverseitigen Verarbeitung verwenden.<\/p>\n<p>Ich hoffe, Sie verstehen die Validierung von HTML-Formularen mit Petersilie. Bitte teilen Sie Ihre Gedanken und Vorschl\u00e4ge im Kommentarbereich unten mit.<\/p>\n<h3>Zum Thema passende Artikel<\/h3>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/de\/statische-website-kostenlos-auf-firebase-hosting-bereitstellen\/\" title=\"Statische Website kostenlos auf Firebase Hosting bereitstellen\">Statische Website kostenlos auf Firebase Hosting bereitstellen<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/de\/erhalten-sie-eine-youtube-videoliste-nach-schluesselwoertern-mit-der-youtube-such-api-und-javascript\/\" title=\"Erhalten Sie eine YouTube-Videoliste nach Schl\u00fcsselw\u00f6rtern mit der YouTube-Such-API und JavaScript\">Erhalten Sie eine YouTube-Videoliste nach Schl\u00fcsselw\u00f6rtern mit der YouTube-Such-API und JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/de\/so-verbinden-sie-die-firebase-realtime-database-mit-ihrem-website-formular\/\" title=\"So verbinden Sie die Firebase Realtime Database mit Ihrem Website-Formular\">So verbinden Sie die Firebase Realtime Database mit Ihrem Website-Formular<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Aufnahmequelle:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>ParsleyJS ist eine Open-Source-JavaScript-Formularvalidierungsbibliothek. In diesem Artikel untersuchen wir, wie Petersilie f\u00fcr die HTML-Formularvalidierung verwendet wird.<\/p>\n","protected":false},"author":1,"featured_media":21644,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[244],"tags":[845],"class_list":["post-25454","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-3","tag-affiai-de"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/25454","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/comments?post=25454"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/25454\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media\/21644"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media?parent=25454"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/categories?post=25454"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/tags?post=25454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}