• Zur Hauptnavigation springen
  • Skip to main content
Web Shaped Logo
  • Blog
  • felix@webshaped.de|+49 (0)176 555 300 74
    Sie möchten Ihr Projekt sofort starten?
  1. Start
  2. Web-Entwicklung
  3. WordPress Comment Form Validierung interaktiv mit JavaScript

WordPress Comment Form Validierung interaktiv mit JavaScript

Zuletzt aktualisiert am 26. Juni 20202 Kommentarecomment-form, javascript, jQuery, WordPress

WordPress validiert das Formular zum Kommentieren sehr statisch. Das unvollständige abschicken dessen führt auf eine wenig ansprechende neue Seite. Nicht gerade Benutzerfreundlich, aber das kann man ändern!

Das sieht dann folgendermaßen aus:

Fehlerseite der WordPress Standard Validierung

Die Idee das Formular intuitiver und intelligenter die Eingaben des Nutzers kontrollieren zu lassen habe ich ehrlicherweise Jasmin zu verdanken die mich in meinem Beitrag zur Datenschutz Checkbox darauf hinwiesen hatte.

Let’s validate!

Kein Sorge, für die bevorstehende Aufgabe müssen wir kein 3000 zeiliges JavaScript mit 12 Klassen schreiben sondern bedienen uns bei einem vorhandenen Projekt.

Da WordPress mit jQuery ausgeliefert wird, fiel meine Wahl auf das jQuery Plugin “jQuery Validation Plugin“. Zum Zeitpunkt der Veröffentlichung dieses Artikels ist 1.19.1 die aktuelle Versionsnummer.

Um direkt loslegen zu können benötigen wir folgende Dinge:

  • jQuery Validation Plugin (juery.validate.min.js)
  • Eine eigene JavaScript Datei (single.js)
  • CSS Regeln (optional wenn ihr ein CSS Framework nutzt)

Ihr besorgt euch also das jQuery Validation Plugin von GitHub und legt es in eurem (Child) Theme ab. Oder noch besser, Ihr installiert das package via NPM, Bower oder NuGet und fügt es eurem Build Tool oder Taskrunner wie z.B. Webpack oder Gulp hinzu.

Als nächstes benötigen wir eine eigene JavaScript Datei die ebenfalls in eurem Theme Abgelegt wird.

Das Javascript in WordPress registrieren und einreihen

Im darauf folgenden Schritt müssen wir die beiden Scripte WordPress zugänglich machen. Dazu nutzen wir die WordPress Hook wp_enqueue_scripts und die Funktion webshaped_scripts(). Mit wp_register_script registrieren wir die .js Datei in WordPress. WP kennt dieses JavaScript nun und kann es wenn es mit wp_enqueue_script “eingereiht” wurde im Frontend ausspielen. In diesen Fall müssen wir allerdings die Abhängigkeiten der Dateien untereinander beachten. Da das jQuery Validation Plugin mit Hilfe der jQuery Bibliothek beschrieben wurde, kann es ohne selbiges nicht arbeiten. Damit es arbeitet, muss jQuery früher als das Plugin geladen werden. Das bestimmen wir über den dritten Parameter der ein Array erfordert.

<?php // sollte schon vorhanden sein

add_action( 'wp_enqueue_scripts', 'webshaped_scripts' );
function webshaped_scripts() {

	wp_register_script( 'jquery-validate', get_stylesheet_directory_uri() . '/pfad-zur-datei/query.validate.min.js', [ 'jquery' ], '1.19.1', true );
	wp_enqueue_script( 'jquery-validate' );

	wp_register_script( 'single-js', get_stylesheet_directory_uri() . '/pfad-zur-datei/single.min.js', [ 'jquery', 'jquery-validate' ], '1.19.1', true );
	wp_enqueue_script( 'single-js' );

}

Eigene Validierungs-Regeln aufstellen

Nachdem wir das jQuery Validation Plugin und die single.min.js Datei über unser WordPress (Child) Theme geladen haben. Geht es jetzt daran die Validations-Regeln für die Comment Form zu schreiben.

Zu erst müssen wir in den jQuery Kotext switchen und erstellen anschließend eine Funktion die wir erst laden wenn der DOM (Quelltext) geladen ist. Für letzeres ist $(document).ready(nameUnsererFunktion); verantwortlich.

(function($) {
  ('use strict');

  function webshapedValidateCommentForm() {
    // auszuführender Code
  }
  $(document).ready(webshapedValidateCommentForm);
})(jQuery);

Das Formular mit dem jQuery Validate Plugin ansprechen

Kommen wir zu den Regeln, hier als “rules” Objekt zu erkennen. Für jedes Input Feld in unserem Formular können wir Regeln erstellen. Dabei nutzt das Plugin den “name” Attribut (z.B. name="wert") als Selektor. WordPress hat standardmäßig folgende Felder author, email, url und comment. Da je genutzter Einstellung oder Theme diese Input Felder variieren können solltet Ihr diese noch mal prüfen. In meinem Beispiel habe ich vier Felder als Pflichtfeld markiert. Das letzte (datenschutz) Feld ist meine DSGVO Datenschutz Checkbox die ich in meinem Beitrag “Datenschutz Checkbox für WordPress Kommentare ohne Plugin” erstellt habe.

So jetzt haben wir unsere Felder und können endlich mit den eigentlichen Regeln loslegen. Validations Methoden hat das Plugin einige, mit required legen wir zum Beispiel fest, ob dieses Feld ein Pflichtfeld ist. Eine vollständige Übersicht findet ihr, hier in der Dokumentation.

rules: {
  author: {
    required: true,
    minlength: 2,
  },
  email: {
    required: true,
    email: true,
  },
  comment: {
    required: true,
    minlength: 20,
  },
  datenschutz: {
    required: true,
  },
},

Warnhinweise erstellen

Ähnlich zu den “rules” verhalten sich auch die “messages”, Ihr wählt jedes Feld mit den “name” Attribut und könnt nun für jede Regel eine Nachricht hinterlegen. Diese wird dann aufgerufen wenn die Eingabe des Nutzers nicht mit der Regel überein stimmt.

messages: {
  author: {
    required: 'Bitte trage Deinen Namen ein.',
    minlength: jQuery.validator.format(
      'Es sind {0} Zeichen erforderlich!'
    ),
  },
  email: {
    required: 'Bitte trage Deine E-Mail-Adresse ein.',
    email:
      'Deine E-Mail-Adresse sollte folgendes Format haben: [email protected]',
  },
  comment: {
    required: 'Bitte schreibe einen Kommentar.',
    minlength: jQuery.validator.format(
      'Es sind {0} Zeichen erforderlich!'
    ),
  },
  datenschutz:
    'Laut DSGVO benötige ich Deine Einwilligung zur Erhebung deiner hier getätigten Daten.',
},

Die Position der Warnungen bestimmen

Nun könnt ihr noch bestimmen wo die Warnhinweise im Formular platziert werden sollen. So wie welches HTML5 Element verwendet werden soll.

// Die Warnung kann ein beliebiges HTML5 Element sein
errorElement: 'div',
errorPlacement: function(error, element) {
  // Die Warnung wird nach dem input Feld ausgegeben
  element.after(error);
},

CSS Klassen vergeben

Damit sich die Hinweise optimal in das Design eurer Website eingliedern, brauchen wir CSS Klassen, die wir für jedes Event vergeben können.

An dieser Stelle möchte ich kurz daraufhinweisen, dass ich mein Theme mit dem CSS Framework Bootstrap 4 (v.4.4.1) entwickelt habe und sich in diesem Beispiel bereits alle nötigen Klassen für eine BS4 form befinden. Wenn ihr zufälligerweise auch Bootstrap 4 nutzen solltet, könnt ihr folgenden Abschnitt einfach übernehmen.

Wenn das nicht der Fall sein sollte, vergebt ihr an dieser Stelle einfach eure eigenen CSS Klassen und legt diese entsprechende in eurem Stylesheet ab.

// Wird dem Warnungs-Label hinzugefügt
errorClass: 'invalid alert alert-warning',
// CSS Klassen die dem input field hinzugefügt werden wenn erfolgreich validiert wurde
validClass: 'valid is-valid was-validated form-control:valid',

success: function(label) {
  // Wenn die Validierung erfolgreich war, entferne folgende CSS Klassen
  label.removeClass('is-invalid was-validated form-control:invalid');
},

highlight: function(element, errorClass) {
  // Highlighte das nicht valide Element und spiele folgende CSS Klassen aus
  $(element).addClass('is-invalid was-validated form-control:invalid');
},

Der komplette JS Code

So sieht die JavaScript Funktion im Ganzen aus. Bitte nicht einfach übernehmen sondern an eure WordPress Settings und an euer Theme anpassen.

(function($) {
  ('use strict');

  function webshapedValidateCommentForm() {
    $('#commentform').validate({
      rules: {
        author: {
          required: true,
          minlength: 2,
        },
        email: {
          required: true,
          email: true,
        },
        comment: {
          required: true,
          minlength: 20,
        },
        datenschutz: {
          required: true,
        },
      },

      messages: {
        author: {
          required: 'Bitte trage Deinen Namen ein.',
          minlength: jQuery.validator.format(
            'Es sind {0} Zeichen erforderlich!'
          ),
        },
        email: {
          required: 'Bitte trage Deine E-Mail-Adresse ein.',
          email:
            'Deine E-Mail-Adresse sollte folgendes Format haben: [email protected]',
        },
        comment: {
          required: 'Bitte schreibe einen Kommentar.',
          minlength: jQuery.validator.format(
            'Es sind {0} Zeichen erforderlich!'
          ),
        },
        datenschutz:
          'Laut DSGVO benötige ich Deine Einwilligung zur Erhebung deiner hier getätigten Daten.',
      },

      errorClass: 'invalid alert alert-warning',
      validClass: 'valid is-valid was-validated form-control:valid',

      success: function(label) {
        label.removeClass('is-invalid was-validated form-control:invalid');
      },

      highlight: function(element, errorClass) {
        $(element).addClass('is-invalid was-validated form-control:invalid');
      },

      errorElement: 'div',
      errorPlacement: function(error, element) {
        element.after(error);
      },
    });
  }
  $(document).ready(webshapedValidateCommentForm);
})(jQuery);

Das Ergebnis

Mein Ergebnis sieht dann folgendermaßen aus. Wer das gerne live testen möchte, kann gerne unter diesem Beitrag einen Kommentar verfassen.

Viel Spaß bei der Umsetzung auf eurer Website!

Das jQuery Validation Formular in Aktion
Lass es uns wissen, wenn dir der Beitrag gefällt. Das ist für uns der einzige Weg herauszufinden, ob wir etwas besser machen können.
Moin, ich bin Felix Scholze.

Ich bin Web-Developer und Designer aus Berlin. In diesem Blog möchte ich gerne mein Wissen über Webseiten-Gestaltung und Programmierung weitergeben.

Diese Beiträge könnten dir auch gefallen

#Gutenberg

Gutenberg standard Vollbildmodus deaktivieren – WordPress 5.4

#comment-form

WordPress Comment Form Validierung interaktiv mit JavaScript

#Extensions

Code dokumentieren leicht gemacht – VS Code Extension Empfehlungen #1

#comment-form

Datenschutz Checkbox für WordPress Kommentare ohne Plugin

Leser-Interaktionen

Hat Dir der Beitrag gefallen? Lass uns diskutieren: Antworten abbrechen

Erforderliche Felder sind mit * markiert.

Wenn du möchtest kannst du folgende Tags nutzen:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Leserbeiträge

  1. Lina

    3. September 2021

    Fast perfekt, vielen Dank! Wenn es jetzt noch eine Möglichkeit gäbe, nach erfolgreicher Übermittlung eine Danke-Nachricht einzublenden, wäre es absolut perfekt 🙂 Geht das? Vielleicht sogar über Ajax damit die Seite nicht neu geladen wird?
    Danke und liebe Grüße!

    Antworten
  2. Der Tester

    29. Juni 2021

    Dies müssten 20 Zeichen sein. Top-Erklärung – vielen Dank hierfür.

    Antworten

Kontaktieren Sie mich

Webentwickler & Webdesigner aus Berlin.

Berlin-Pankow

felix@webshaped.de
+49(0)176 555 300 74

Folgen Sie mir auf:


Bewerten Sie meine Arbeit auf:

Facebook, Google, Proven Expert

    Datenschutz akzeptieren? *

    * Pflichtfeld

    • Impressum
    • Datenschutz
    • Sitemap