Kommentar-Formular mit Javascript validieren

Weisst Du was mega uncool ist? Wenn man ein Kommentar auf einer WordPress Seite abgeben möchte und dann auf einer hässlichen, leeren Seite landet, nur weil man ein paar Felder im Kommentarformular vergessen hat auszufüllen. Zum Glück gibt es eine bessere Lösung! Wir zeigen Dir, wie Du mit einer Formular-Validierung direkt im Kommentarformular die Nutzererfahrung deutlich verbessern kannst.

1. Benötigte Skripte

Schnapp dir die beiden Dateien Query Validation Plugin (z. B. von GitHub) und comment_validate.js (die musst du selber erzeugen). Mit dem Plugin kannst du die Überprüfung der Eingabeformulare durchführen, während du mit der Javascript-Datei die Input-Felder, Regeln und Ausgaben anpassen kannst. Auf geht’s!

1.1 Skripte einbinden

Die beiden Skripte werden wie üblich mit der Aktion wp_enqueue_scripts in der functions.php eingebunden:

add_action('wp_enqueue_scripts', 'ud_load_scripts');
function ud_load_scripts(){
  wp_enqueue_script( 'jquery_validate',  get_stylesheet_directory_uri().'/js/jquery.validate.min.js', array('jquery'), null, true );
  wp_enqueue_script( 'comment_validate', get_stylesheet_directory_uri().'/js/comment_validate.js', array('jquery', 'jquery_validate'), null, true );
}

2. Regeln, Überprüfung und Ausgabe

2.1 jQuery Validation Plugin

Das Plugin stellt eine Funktion validate() zur Verfügung, welche die Input-Felder überprüft. Als Selektor wird das name-Attribut benutzt.

<input id="email" name="email" type="text" placeholder="Email*" value="">

2.2 Regeln bestimmen

Die Regeln und entspr. Ausgaben werden über eine eigene Datei bestimmt, in unserem Beispiel in der comment_validate.js. Hier wird also festgelegt, welche Felder wie überprüft werden sollen und auch das Error-Handling. Im Attribut rules werden die Regeln bestimmt. Eine Liste mit den vollständigen Validierungs-Methoden findet sich in der Dokumentation.

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

2.3 Warnhinweise bestimmen

Als nächstes werden die Warnhinweise bestimmt:

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: name@adresse.com',
  },
  comment: {
    required: 'Bitte schreibe einen Kommentar.',
    minlength: jQuery.validator.format(
      'Es sind {0} Zeichen erforderlich!'
    ),
  }
},

2.4 Error Handling

Das Plugin überprüft die Eingaben und hängt den Input-Feldern bei bestandener bzw. nicht bestandener Überprüfung die entsprechenden Klassen an.

// CSS Klassen, wenn nicht erfolgreich validiert wurde
errorClass: 'invalid alert alert-warning',
// CSS Klassen, wenn erfolgreich validiert wurde
validClass: 'valid is-valid was-validated form-control:valid',

success: function(label) {
  // Entferne folgende CSS-Klassen bei erfolgreicher Validierung
  label.removeClass('is-invalid was-validated form-control:invalid');
},

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

2.5 HTML-Element und Position

Das Plugin erlaubt auch zu bestimmen, in was für einem HTML-Elemnt die Warnhinweise und auch an welcher Stelle diese ausgegeben werden sollen.

// HTML-Tag für die Warnungs-Ausgabe (kann ein beliebiges HTML5 Element sein)
errorElement: 'div',
errorPlacement: function(error, element) {
  // Warnung nach dem Input-Field ausgeben
  element.after(error);
},

3. Vollständiges Skript

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

  function myCommentFormFunction() {
    $('#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: name@adresse.com',
        },
        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(myCommentFormFunction);
})(jQuery);