Dass HTML5 ein paar neue input-types definiert, habe ich durch die hcard-input-brainstorming so am Rande auf geschnappt, mir aber nichts weiter dabei gedacht… Durch Zufall bin ich heute aber über folgenden Tweet von Sylvia Egger gestoßen:
Just implemented native #HTML5 form validation on #wp comments form – it' quite simple & should be in #wp default theme
und habe bissle recherchiert… Mit den neuen Input-Types ist es doch tatsächlich möglich Input-Felder über den Browser validieren zu lassen… Ich bin begeistert! 🙂
Trägt man beispielsweise eine Nicht-Email-Adresse in folgendes Feld…
<input type="email" />
Code-Sprache: HTML, XML (xml)
bekommt man…
Schön wenn man sich noch über solche Kleinigkeiten freuen kann oder 😉
Lange rede kurzer Sinn: Da WordPress alle Formulare an zentraler Stelle definiert, ist es ziemlich einfach sie mit ein paar neuen Input-Types zu versehen. Mit dem folgenden Code wird das Kommentar-Formular mit den Typen "email" und "url" und das Suchformular mit dem Typ "search" (funktioniert nur in den WebKit-Browsern) erweitert:
Code-Update: Eric Eggert hat mich in den Kommentaren darauf hingewiesen, dass man mit <input required />
auch noch die Pflichtfelder validieren kann. Danke!
Code-Update 2: Dank maxe werden jetzt auch die WordPress Settings berücksichtigt (Comment author must fill out name and e-mail) und das "Comment"-Feld ist natürlich auch required
<?php
/*
Plugin Name: html5 input-types
Plugin URI: https://notiz.blog/
Description: Adds the new HTML5 input-types to WordPress' default forms
Version: 0.1
Author: pfefferle
Author URI: https://notiz.blog/
*/
add_filter("comment_form_default_fields", "change_comment_input_types");
function change_comment_input_types($fields) {
if (get_option("require_name_email", false)) {
$fields['author'] = preg_replace('/<input/', '<input required', $fields['author']);
$fields['email'] = preg_replace('/"text"/', '"email" required', $fields['email']);
} else {
$fields['email'] = preg_replace('/"text"/', '"email"', $fields['email']);
}
$fields['url'] = preg_replace('/"text"/', '"url"', $fields['url']);
return $fields;
}
add_filter("get_search_form", "change_search_form_input_types");
function change_search_form_input_types($form) {
return preg_replace('/"text"/', '"search"', $form);
}
add_filter("comment_form_field_comment", "change_comment_field_input_types");
function change_comment_field_input_types($field) {
return preg_replace('/<textarea/', '<textarea required', $field);
}
?>
Code-Sprache: HTML, XML (xml)
Funktioniert als Plugin und in Child-Themes (einfach in die functions.php
kopieren).
Danke auch an Marc Görtz der mich über Twitter reichlich mit Links zu dem Thema versorgt hat:
Testen könnt ihr das übrigens hier auf notiz.blog.
Gute Sache, leider greift die Überprüfung aber nicht, wenn man die Felder leer lässt. Daher einfach das Element um das Attribut „required“ erweitern, dann passt das auch: https://gist.github.com/1077512
Hallo Eric, vielen Dank für den Tipp! Habe gleich Text und Code angepasst.
…und wie er sich gefreut hat 🙂
Sollte im Plugin nicht noch eine Überprüfung auf die Diskussions-Einstellungen „Benutzer müssen zum Kommentieren Name und E-Mail-Adresse hinterlassen“ stattfinden: if ($req)
Oh stimmt, man kann die „Required“-Felder ja über die Settings steuern. Ich werde den Code gleich heute Abend anpassen und mal ein Github-Repository anlegen.
Kollaboratives Plugin entwickeln 🙂
Guter Artikel. Ich verfolge die Entwicklung von HTML 5 schon ein bisschen und bin begeistert was es für neue Möglichkeiten bietet. Die Validierung habe ich auch mitbekommen. Das ist eine super Möglichkeit die Textfelder richtig ausfüllen zu lassen. Zudem ist es noch so einfach, dass es nahezu jeder hinbekommen dürfte. Wenn HTML 5 flächendeckend zum Einsatz kommt, wird das Web gleich ein bisschen schöner.