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.
