HTML-Formulare verifizieren

Kontaktformulare werden auf fast allen Webseiten eingesetzt. Ich habe vor Kurzem meine Skripte überarbeitet und dokumentiere hiermit meine Erkenntnisse. Zum Einsatz kommen HTML5 und parsley.js.

Ein einfaches Formular zur Kontaktaufnahme sieht ungefähr wie folgt aus:

<form action="sendmail.php" method="post">

  <p>
    <label for="name">Name:</label>
    <input id="name" type="text" name="name" required />
  </p>
  <p>
    <label for="email">E-Mail:</label>
    <input id="email" type="text" name="email" required />
  </p>
  <p>
    <label for="nachricht">Nachricht:</label>
    <textarea id="nachricht" name="nachricht" rows="10" required></textarea><br />
  </p>

  <input type="submit" value="Nachricht senden" />

</form>

Interessant ist an dieser Stelle das Attribut „required„, das schon eine erste Validierung vornimmt und bei einer fehlenden Eingabe „Bitte füllen Sie dieses Feld aus.“ ausgibt.

Es ist ab HTML5 verfügbar und wird m.W. von allen aktuellen Browsern verstanden. Als Fallback sollte man im nachgeschalteten PHP-Code eine entsprechende Abfrage einbauen, falls der Browser eine leere Eingabe durchlässt.

Die Verwendung von <label for=“name“> und dem entsprechenden <input id=“name“… führt dazu, dass Label und Eingabefeld miteinander verbunden werden und ein Klick auf das Label das entsprechende Eingabefeld aktiviert. Eine praktische Sache.

Noch etwas ausgefeilter wird die Validierung und die Ausgabe für den Nutzer durch den Einsatz von Javascript in Form von parsley.js.

Die Anwendung ist dabei denkbar einfach, da Parsley direkt auf die sowieso verwendeten HTML-Formularattribute zugreift.

Parsley benötigt jQuery, parsley.js und ggf. eine Übersetzungsdatei:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/parsley.min.js"></script>
<script type="text/javascript" src="js/parsley/de.js"></script>

Nun muss nur noch ein Aufruf in das Form-Element und schon ist Parsley im Einsatz:

<form action="sendmail.php" method="post" data-parsley-validate>

Parsley bietet sehr viele zusätzliche Validatoren und Optionen. Um eine E-Mail-Adresse zu prüfen fügt man im Input data-parsley-type=“email“ ein.

Das sieht dann so aus:

<input id="email" type="text" name="email" data-parsley-type="email" required />

Fehlermeldungen werden nun direkt unter dem Feld ausgegeben. Wer es etwas schöner haben möchte, kann die Ausgabe mit CSS aufhübschen und so z.B. Pflichtfelder rot unterlegen und korrekte Eingaben grün.

Mein Basis-CSS für Parsley sieht so aus:

li.parsley-required, li.parsley-type { color:red !important; }

input.parsley-success,
select.parsley-success,
textarea.parsley-success {
  color: #468847;
  background-color: #DFF0D8;
  border: 1px solid #D6E9C6;
}

input.parsley-error,
select.parsley-error,
textarea.parsley-error {
  color: #B94A48;
  background-color: #F2DEDE;
  border: 1px solid #EED3D7;
}

.parsley-errors-list {
  margin: 2px 0 3px 0;
  padding: 0;
  list-style-type: none;
  font-size: 0.9em;
  line-height: 0.9em;
  opacity: 0;
  -moz-opacity: 0;
  -webkit-opacity: 0;

  transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
}

.parsley-errors-list.filled {
  opacity: 1;
}