Allgemeine Informationen zu Elektronik, Platinen, Programmierung, PCs und mehr...

von   am   | 7 Kommentare | aktualisiert am  | 534 mal gelesen
2 mal als PDF heruntergeladen

Kommentare in WordPress vor Absenden prüfen

   Kommentar Fehler

Kommentarformular in Wordpress mit jQuery prüfen

Kommentar Fehler

 

So sieht die Fehlermeldung zu einem falsch ausgefüllten Kommentarformular in WordPress üblicherweise aus.

 
Wenn das Kommentarfeld nicht korrekt ausgefüllt wurde und man auf “Absenden” klickt, dann sieht die nachfolgende Seite sehr dürftig aus. Es fehlt einfach das Layout des Templates. Es gibt keinerlei Navigation, nur der schnöde Hinweis auf einen Fehler und welche Felder nicht korrekt ausgefüllt wurden.

Mich hat das schon immer gestört. Auch wenn man diese Seite selten zu Gesicht bekommt.

Man kann natürlich in der wp-includes/functions.php und in der wp-comments-post.php entsprechend Anpassungen vornehmen, damit das eigene Layout in der erzeugten Fehlerseite angezeigt wird. Das habe ich bei mir auch so gemacht:

Kommentar Fehler mit Layout

 

Vorsicht beim Ändern der WordPress Core-Dateien

Allerdings sollten grundsätzlich keine Änderungen an den Systemdateien von WordPress vorgenommen werden. Auf jeden Fall sollte die Originaldatei immer als Kopie vorliegen.

Nun sieht die Fehlerseite schöner aus und der Besucher weiß, wo er ist und was er machen soll.
Allerdings bekommt der Seitenbetreiber dennoch möglicherweise von seinem Antispam-Plugin eine E-Mail die auf Spam hinweist, auch wenn es keiner ist ;-)

spam-mail

 

Das Aufrufen der Fehlerseite des Kommentarformulars mit jQuery vermeiden.

Es ist viel besser, wenn der Besucher schon vor Absenden des Kommentars auf einen möglichen Fehler hingewiesen wird.
Bei den meisten Kontaktformularen wird das ja auch so gemacht. Daher habe ich meine comments.php aus meinem Templateordner mit folgendem jQuery-Code erweitert. Die Zeilen habe ich einfach am Ende eingefügt.

Kommentarformularprüfung mit jQuery:

Die Prüfung kann auch über HTML5 erfolgen.

Wenn dein Template in HTML5 programmiert ist und in der functions.php so etwas wie add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'widgets' ) ); enthalten ist, dann ist die Formularprüfung auch allein per HTML5 möglich.
Hierzu sind nur wenige Zeilen Code notwendig, um das required-Attribut hinzuzufügen und das novalidate-Attribut des Formulars abzuschalten.

Kommentarformularprüfung mit HTML5:

 



Bewerte den Artikel, wenn du magst:
[Gesamt: 18 Durchschnitt: 4.8/5]

7 Kommentare

  1. Domberg

    Mit HTML5 Formularen brauchst du doch keine Validierung mit jQuery mehr :) viele der Variablen hätte man außerdem schöner benennen können, jedoch zum Verständnis okay. Z. 6-8 hätte man in einem Selektor zusammenfassen können, ebenso die folgende Initialisierung der Variablen. Während ich den Kommentar schreibe, erscheint mir ständig dein Energiesparen “Plugin” schon zum 4. Mal – kannst du das optimieren? :)

    VG
    Domberg

    Bewerte diesen Kommentar, wenn du magst:
    [Gesamt: 16    Durchschnitt: 4.8/5]
  2. Harry Milatz

    Moin Moin :-)
    Also selbst bei einem HTML5 Template und auch bei der aktuellen WordPress Version, wird nach absenden die wp-comments-post.php aufgerufen. Und die hat ja mit dem Template so nichts zu tun. Da ist HTML5 vollkommen egal ;-)
    Und die nackte Fehlermeldung sieht eben nicht schön aus.

    Auf deiner Seite ist das ja auch so, es reicht die Matheaufgabe zu lösen und dann auf Absenden zu klicken ;-) Und schon kommt die wp-comments-post.php.

    Genau bei den Variablen soll ja ersichtlich sein für was sie stehen. Und daher auch keine grossartige Zusammenfassung ;-) Der Profi wird das so machen, der Laie kann es aber so übernehmen und findet dennoch im Code später den Zusammenhang wenn er was ändern will oder was nicht so läuft wie es soll.

    Jau bei dem “Energie sparen” werde ich noch die Tastatur mit abfragen, da habe ich nicht dran gedacht :-) Danke!

    Bewerte diesen Kommentar, wenn du magst:
    [Gesamt: 18    Durchschnitt: 4.9/5]
  3. Domberg

    Gut, mein Blog liegt auch schon ewig und drei Tage rum – da ist schon seit längerem ein Relaunch geplant. Doch wie immer fehlt die Zeit. Ich persönlich finde eine clientseitige Validierung mit jQuery nur bedingt sinnvoll, da man eh noch einmal serverseitig validieren sollte und clientseitig eher “leere” Felder abfangen möchte, oder korrekte Mailadressen. Da kann dann aber je nach Input Type das HTML5 Formular schon abhelfen, da die Validierung zB für Mailadressen mit drin ist.

    VG
    Domberg

    Bewerte diesen Kommentar, wenn du magst:
    [Gesamt: 17    Durchschnitt: 4.8/5]
    • Harry Milatz

      Da musst Du dann aber mit einem entsprechenden Plugin heran(Jetpack – Kommentare z.B., ist mir aber viel zu “gross”). Das wollte ich vermeiden(Ladezeit). Oder ein passendens Template finden, welches nicht die Funktion comment_form von WordPress selbst verwendet oder aber entsprechend eingreift und die input-Felder via Hook etc. erweitert. Kennst du da ein Template, welches das macht?

      Der HTML Code für die Kommentarfunktion kommt ja vom WordPress-Core selbst und nicht vom Template. Und zwar kommt der HTML-Code aus der wp-includes/comment-template.php so ab Zeile 2181 wird das Array erzeugt. Und in dem Code ist nichts von “required”, “pattern” etc. enthalten, was dann ja für eine HTML5-Validierung nötig wäre. Vielleicht schaue ich mal, ob ich da eine PHP Funktion schreiben kann, die das dann erledigt ;-)

      Ich habe viel an den Core-Dateien geändert und weiß was ich da nach jedem Update von WordPress wieder zu tun habe ;-) Ich fahre das aber nach und nach zurück und versuche es anders zu implementieren. So wie hier eben ;-) Ich könnte hier aber noch ein Script einstellen, welches genau zu HTML5 passt. Das wäre dann ja um einiges kürzer.

      Bewerte diesen Kommentar, wenn du magst:
      [Gesamt: 17    Durchschnitt: 4.9/5]
      • Domberg

        Vielleicht funktioniert ja ein einfaches $( 'input[type=email]' ).attr( 'required' ); um ein Email Input auch als Pflichtfeld zu definieren?

        Bewerte diesen Kommentar, wenn du magst:
        [Gesamt: 18    Durchschnitt: 4.9/5]
        • Domberg

          Man kann auch via Pattern als Attribut eine Validierung von Inputs vornehmen über regular Expressions

          Siehe HTML5Pattern & W3Schools Pattern Attribute

          Bewerte diesen Kommentar, wenn du magst:
          [Gesamt: 18    Durchschnitt: 4.8/5]
          • Harry Milatz

            Ja das funktioniert. .attr('required', 'required'); geht auf jeden Fall.

            Ich weiss ;-) Daraufhin war auch mein Kommentar bezogen, dass ich so einen, recht kurzen, Code hier noch reinschreiben könnte ;-)
            Das Snippet jetzt sollte möglichst allgemein gültig sein, auch wenn jemand (noch) kein HTML5 Template verwendet.

            Bewerte diesen Kommentar, wenn du magst:
            [Gesamt: 18    Durchschnitt: 4.7/5]

Kommentar verfassen

Du kannst auch mit einem deiner folgenden Profile kommentieren*:


* Zustimmung zur Datenschutzerklärung
Dieses Kommentarformular speichert Name, E-Mailadresse und Inhalt, sowie die IP-Adresse für maximal 60 Tage. Für detaillierte Informationen lies bitte unsere Datenschutzerklärung.
*

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert. - HTML ist erlaubt.Du kannst folgende HTML Tags und Attribute benutzen:
<a href="" title=""> <abbr title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strong> <pre style="" class="" title="" data-url=""> <span style="" class="" title="" data-url=""> .

Top
green

BILDSCHIRM OFF.
SPAREN ON!

Ein dunkler Monitor verbraucht im Gegensatz zu einem hellen bis zu 20% weniger Strom.
Daher spare ich jetzt Energie für dich.

Harrys Welt