Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Hinzufügen einer Formularüberprüfung zu WordPress-Kommentaren mit jQuery

by
Read Time:13 minsLanguages:

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Wenn es um eine einfachere Benutzererfahrung geht, ist die sofortige Überprüfung Ihres Formulars auf derselben Seite viel sauberer als das erneute Laden von Seiten und möglicherweise der Verlust von Formularinhalten. In diesem Tutorial werde ich Ihnen zeigen, wie Sie mit jQuery ein Beispielkommentar sofort überprüfen.

Unser Beispiel

In unserem Beispiel fügen wir einem Kommentarformular im Standard-WordPress-Design eine Formularüberprüfung hinzu. Der Vorgang ist jedoch für alle Arten der Formularvalidierung ähnlich, sodass Sie diese Technik problemlos auf ein Nicht-WordPress-Beispiel anwenden können.
Das Thema, zu dem wir die Validierung hinzufügen, ist das Standardthema von WordPress, das bei jeder Installation mitgeliefert wird. Wenn Sie also vollständig mitmachen möchten, gehen Sie einfach zu Wordpress.org und laden Sie eine Kopie herunter und installieren Sie sie auf Ihrem Server.

Wenn Sie mit dem Kommentarformular von WordPress nicht vertraut sind, können Sie auch das NETTUTS-Tutorial - Enträtseln der Geheimnisse von WordPress' Comments.php besuchen




Schritt 1 - Laden Sie jQuery & das Bassistance.de Validation Plugin herunter

Sie können jQuery von der Website jQuery.com herunterladen. Auf der ersten Seite sehen Sie direkt "Download jQuery und einige verschiedene Downloads. Wir werden nicht mit dem jQuery-Framework herumspielen, daher können Sie die"Minified and Gzipped"-Version herunterladen Dies bedeutet, dass es komprimiert ist.

Als nächstes benötigen wir das jQuery-Validierungs-Plugin von bassistance.de. Mit diesem Plugin können Sie Webformulare validieren und hier herunterladen. Diese Datei enthält einige Javascript-Dateien, aber wir benötigen nur "jquery.validate.min.js" (ebenfalls komprimiert) für dieses Tutorial.

Schritt 2 - Hochladen der Dateien

Jetzt sollten Sie 2 Dateien haben, "jquery.validate.min.js" und "jquery-1.2.6.min.js". Wir werden diese in unser WordPress-Vorlagenverzeichnis hochladen.

Da wir in diesem Tutorial das Standard-WordPress-Design verwenden, das wörtlich "Standard" genannt wird, befindet sich der benötigte Ordner in /wp-content/theme/default/.

Um die Organisation zu gewährleisten, erstellen wir ein neues Verzeichnis mit dem Namen "js". Das ist der Ordner mit dem gesamten Javascript. Wenn Sie das Verzeichnis erstellt haben, laden Sie die Dateien in den soeben erstellten Ordner hoch. (/wp-content/themes/default/js)

Schritt 3 - Javascript laden

Nachdem wir das Javascript in unser Verzeichnis hochgeladen haben, müssen wir es noch in unser Thema laden. Das Javascript sollte zwischen den Tags <head> </head> geladen werden. Die Head-Tags befinden sich in einer PHP-Datei, die sich im Theme-Verzeichnis befindet.

Suchen Sie also nach "header.php". Das ist die Datei, in der sich der Anfang des Themencodes befindet. Jetzt müssen wir sicherstellen, dass wir das Javascript vor diesen 2 Zeilen hinzufügen:

So fügen wir eine Javascript-Datei ein:

Wenn Sie ein WordPress-Theme für einen Client erstellen, möchten Sie natürlich sicherstellen, dass es einfach zu installieren ist. Sie möchten nicht sagen: "Sie müssen jedoch immer noch die URL zum Javascript ändern!"
Wir möchten, dass die Dinge automatisch passieren, daher ist es am besten, wenn wir WordPress-Tags verwenden. Um die URL zum Vorlagenverzeichnis anzuzeigen, können Sie diesen Code verwenden:

In Kombination mit dem Code, der das Javascript enthält, ist das Endergebnis:

Jetzt werden diese 2 Javascript-Dateien auf jeder Seite geladen und können mit diesem Thema auf allen WordPress-Seiten verwendet werden!

Schritt 4 - Validierung aktivieren

Ok, jetzt ist es Zeit, die Validierung des Kommentarformulars zu aktivieren. Gehen Sie also zurück in das Themenverzeichnis und suchen Sie nach /wp-content/themes/default/comments.php

Jetzt müssen wir uns nur noch den Formteil des Codes ansehen! Das Formular beginnt in Zeile 73 und sieht folgendermaßen aus:

Wie Sie sehen können, hat das Formular ein ID-Element, es heißt "Kommentarformular". Wir benötigen diesen Namen, um das Javascript zu aktivieren.
Schließen Sie diese Datei noch nicht, wechseln Sie zuerst zurück zu "header.php" und fügen Sie diese Zeilen unter jquery.validate.min.js hinzu

Wie Sie sehen können, befindet sich dort die ID des Formulars. "#commentform" aktiviert die Validierung für jedes Formular mit dem ID-Kommentarformular.
Achten Sie also darauf, dass Sie keine doppelten IDs verwenden. Andernfalls werden einige Formulare validiert, wenn dies möglicherweise nicht erforderlich ist.

Wenn Sie jetzt einen Kommentar einreichen und alle Felder leer lassen, wird nichts ausgeführt, und es wird weiterhin der Standard-WordPress-Fehler angezeigt. Im nächsten Schritt werde ich Ihnen zeigen, wie Sie die Validierung für jedes Feld starten.

Schritt 5 - Namensfeldvalidierung

Jetzt ist es Zeit, die Validierung für jedes Feld zu starten. Dies bedeutet, dass Sie der Validierungs-Javascript-Datei mitteilen, welche Art von Validierung erforderlich ist. Das Validierungs-Javascript ist so einfach zu verwenden, dass Sie nur einige spezielle Wörter eingeben müssen, um die Validierung zu starten. Beginnen wir also mit dem ersten Feld, das ist das erforderliche Namensfeld. Das Feld sieht folgendermaßen aus:

Wir möchten sicherstellen, dass der Kommentator das Feld ausgefüllt hat, und wenn möglich sicherstellen, dass mindestens 4 Zeichen eingegeben werden. JA! aber wie? Nun, das ist extrem einfach. Sie können die Validierung definieren, indem Sie eine Klasse aufrufen. Fügen Sie einfach class = "required" hinzu.

Und WTF es funktioniert! Wenn Sie auf "Senden" klicken, ohne Ihren Namen einzugeben, wird "Dieses Feld ist erforderlich" angezeigt. Nett!! Was ist also, wenn der Benutzer keine Mindestanzahl von Zeichen eingibt?
Nun, wir können diese Validierung einfach hinzufügen, indem wir den Feldoptionen minlength = "4" hinzufügen:

Und jetzt, wenn Sie etwas eingeben (weniger als 4 Zeichen), wird eine neue Meldung angezeigt: "Bitte geben Sie mindestens 4 Zeichen ein." Das funktioniert also perfekt! Mit Minlength können Sie die Mindestanzahl von Zeichen festlegen. Ersetzen Sie einfach die Zahl durch das, was Sie für notwendig halten.

Schritt 6 - Validierung des Mailfelds

Als nächstes werden wir das E-Mail-Feld validieren. So sieht das Feld aus:

Ich weiß, was Sie denken, wir machen genau das gleiche wie im vorherigen Schritt. Nun, das wäre falsch, denn abgesehen davon, dass das Feld einfach benötigt wird, muss es auch eine gültige E-Mail-Adresse sein. Jetzt wissen wir, wie man es erforderlich macht, indem man einfach class ="required" hinzufügt, aber wie man die E-Mail validiert? Nun, es ist so einfach wie das Einstellen, dass es erforderlich ist, außer dass wir jetzt nur noch E-Mails hinzufügen.

Hä was? Fügen Sie einfach "E-Mail" hinzu, damit es zu class="Erforderliche E-Mail" wird. Dies macht es erforderlich und sucht nach einer gültigen E-Mail:

Wenn Sie das E-Mail-Feld ausprobieren, werden Sie feststellen, dass dort "Dieses Feld ist erforderlich" steht. wenn eingereicht, ist das gut! Und jetzt, wenn Sie etwas eingeben, das nicht dieses Format hat: xx@xx.xx, heißt es "Bitte geben Sie eine gültige E-Mail-Adresse ein." Das funktioniert also perfekt! Sehen Sie, wie einfach es ist!

Schritt 7 - Feldvalidierung der Website

Werden wir das Website-Feld validieren? Es ist nicht erforderlich, oder? Ja, du hast recht! Wir wollen aber eine gültige URL! Wir werden also eine URL validieren. Es ist genauso einfach wie bei früheren Validierungen, aber schauen wir uns zuerst das URL-Feld an:

Jetzt können Sie es erforderlich und eine Mindestanzahl von Zeichen festlegen, aber ich denke nicht, dass dies für dieses Feld erforderlich ist.
Ich möchte nur eine gültige URL. Wie geht das? Wir fügen nur eine weitere Klasse hinzu, aber dieses Mal nennen wir sie class="url". Fügen wir also Folgendes hinzu:

Und was weissen Sie? Ich gebe "blabla" in das Feld der Website ein und es wird direkt "Bitte geben Sie eine gültige URL ein." Zurückgegeben. Wenn ich es leer lasse, heißt das nicht, dass es beim Senden erforderlich ist.
Das funktioniert also perfekt, so wie ich es wollte! Wie Sie sehen, ist es dank jQuery und dem Validierungs-Plugin sehr einfach.

Schritt 8 - Validierung des Kommentarfelds

Das ist das letzte Feld, das überprüft werden muss. Jetzt mag ich keine kurzen Spam-Nachrichten wie "Klick mich" und solche Kommentare, aber ich hasse auch lange Nachrichten, deren Lesen Stunden dauert oder die nur voller Spam sind. Ich möchte also eine minimale und eine maximale Anzahl von Zeichen. Aber zuerst schauen wir uns das Kommentarfeld an:

Nun, Sie kennen Schritt 1, fügen Sie die erforderliche Klasse (class="required") hinzu, um sicherzustellen, dass etwas in den Textbereich eingegeben wird. Nun das Minimum, erinnerst du dich richtig? (minlength="") Jetzt denke ich, dass mindestens 10 Wörter eingegeben worden sein müssen. Das wäre also minlength="10", so einfach ist das immer noch. Aber jetzt wollen wir ein Maximum setzen, aber wie? Nun, das Plugin hat eine Lösung dafür. Statt Minenlänge fügen Sie einfach Maxlength plus die Anzahl der Wörter hinzu. Ich denke, 100 Wörter sind genug, also addiere maxlength="100".

EINFACH! Ja, ich weiß! So würde es also aussehen:

Wenn Sie also das Formular leer senden, wird wie in allen anderen Feldern "Dieses Feld ist erforderlich" angezeigt. Wenn Sie jedoch weniger als 10 Zeichen eingeben, wird "Bitte geben Sie mindestens 10 Zeichen ein" angezeigt. und wenn Sie mehr als 100 eingeben, heißt es "Bitte geben Sie mindestens 10 Zeichen ein."! Also haben wir die Validierung abgeschlossen!! Aber das ist noch nicht alles, wir müssen es noch stylen!

Schritt 9 - Formularstyling

Ich weiß nichts über Sie, aber ich mag nicht, wie das Formular aussieht. Es ist chaotisch und die Fehler erscheinen einfach ohne Stil. Also stylen wir alles so, dass es schön und sauber aussieht, aber zuerst möchte ich die Position des Etiketts ändern. Wie Sie jetzt sehen können, wird zuerst das "Eingabefeld", dann der "Fehler" und dann die "Feldbezeichnung" angezeigt.

Ich denke, es sollte so aussehen wie "Feldbezeichnung", "Eingabefeld" und dann "Fehler". Dazu müssen wir nur die Bezeichnung über den HTML-Code verschieben. Ändern wir also das erste Feld von:

Zu:

Wie Sie sehen, haben wir nur das <label> über das verschoben. Wenn Sie jetzt Ihre Kommentarseite aktualisieren, sehen Sie, dass der Text "Name (erforderlich)" vor das Eingabefeld verschoben wird.
Wiederholen Sie diesen Schritt nun für alle Eingabefelder. Am Ende sollte er folgendermaßen aussehen:

Wie Sie sehen können, haben alle Felder Beschriftungen, mit Ausnahme des Kommentarfelds. Ich denke, es sollte eine Beschriftung haben. Machen Sie dasselbe und platzieren Sie eine Beschriftung über dem Eingabefeld:

Das sieht doch nicht viel besser aus, oder? Das liegt daran, dass wir es noch stylen müssen! Jetzt ist es Zeit, die CSS-Themendatei zu öffnen. Die CSS-Datei für dieses Thema finden Sie unter "/wp-content/themes/default/style.css". Öffnen Sie einfach diese Datei und scrollen Sie ganz nach unten.

OK, wir sind bereit, mit dem Styling zu beginnen, aber wir möchten sicherstellen, dass nur das Formular von diesem CSS betroffen ist. Dank der Formular-ID können wir sicherstellen, dass das geschieht. Vor jeder der von uns hinzugefügten CSS-Zeilen müssen Sie also #commentform .classname eingeben. Dadurch wird sichergestellt, dass nur Felder zwischen betroffen sind.

Wir werden zuerst mit dem Label-Tag beginnen, also fügen Sie dies dem CSS hinzu:

Jetzt können wir CSS auf das Etikett anwenden, indem wir Optionen zwischen {und} eingeben. Stellen wir also zuerst eine Breite ein, so viel Platz wird es bekommen, ungefähr 200px sollten gut sein. Sie können immer noch alle Zeilen lesen und es wird kein Text abgeschnitten.

Wie Sie sehen, passiert nichts. Dies liegt daran, dass wir immer noch sicherstellen müssen, dass die Etiketten links bleiben. Wir können float dafür verwenden:

Das sieht jetzt eher so aus! Gestalten wir nun die Eingabefelder und den Textbereich.
Um CSS auf diese Felder anzuwenden, können wir sie mit "input" und "textarea" aufrufen. Fügen wir das plus einen kleinen Rand hinzu:

Jetzt möchte ich, dass alle Felder gleich lang sind, ebenso wie der Textbereich. Wir werden also eine feste Breite wie folgt anwenden:

Schritt 10 - Fehler beim Styling

Wenn Sie jetzt auf "Senden" klicken, sehen Sie, dass die Fehlermeldungen nicht sehr gut aussehen. Und ich denke, sie müssen direkt unter den Eingabefeldern liegen. Wenn das Validierungsskript einen Fehler ausgibt, sieht das HTML folgendermaßen aus:

Das sagt uns, dass generierte Fehler die Klasse "Fehler" erhalten. Probieren Sie es also aus und verschieben Sie den Fehler unter die Eingabefelder.
Denken Sie daran, dass die Beschriftungen eine Breite von 200 Pixel haben. Sie wissen also, dass wir für diese Pixelanzahl einen linken Rand verwenden müssen:

Aber das ist ein bisschen schlicht, also fügen wir eine Hintergrundfarbe und einen Rand hinzu:

Ein paar Dinge hier, die es schlecht aussehen lassen, die Schriftgröße, es gibt keine Auffüllung (Abstand zwischen Text und dem grauen Rand) und den Rand (Abstand zwischen Fehlern und Feldern). Außerdem würde es viel besser aussehen, wenn die Fehlerbreite mit dem Eingabefeld übereinstimmt. Versuchen wir also Folgendes:

Sie können sehen, dass ich die Breite angepasst habe. Sie müssen die Dinge immer ein wenig anpassen, damit alles in einer Reihe steht:

Das sieht schon toll aus, aber es fehlt etwas! Ich kenne ein Fehlerbild! Versuchen wir es mit einem famfamfam-Symbol.

Nun, das ist es nicht wirklich, denke ich! Wir müssen den Text nach rechts verschieben, wir können dies mit padding-left tun:

Denken Sie immer daran, dass die Verwendung der Auffüllung die feste Größe erhöht. Daher haben wir links eine Auffüllung von 20 Pixel angewendet, was bedeutet, dass wir 20 Pixel von der Breite abziehen müssen. Deshalb habe ich die Breite auf 209 (229-20) geändert.

Und das ist es! Das jQuery-Validierungs-Plugin ist extrem einfach zu verwenden und anzuwenden. Sie können diese Technik auf jedem Formular anwenden, nicht nur auf WordPress-Kommentarformularen.




Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.