HTML5 Logo

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…

Email Validation im Firefox

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.