Kommentar-Formular mit Javascript validieren

Das Kommentar-Formular wird bei WordPress statisch validiert. Wenn nicht alle Felder ausgefüllt worden sind, bedeutet dies einen Aufruf auf eine wenig ansprechende Seite. Etwas benutzerfreundlicher ist eine Validierung gleich auf dem Formular.

1. Benötigte Skripte

Es werden zwei Dateien benötigt, einerseits das Query Validation Plugin (z. B. hier von GitHub), welches die eigentliche Überprüfung vornimmt, und dann noch eine weitere Javascript-Datei, in welchem die Input-Felder, Regeln und Ausgaben bestimmt werden, hier nenne ich diese mal comment_validate.js.

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);