{"id":3840,"date":"2011-07-11T20:46:37","date_gmt":"2011-07-11T18:46:37","guid":{"rendered":"http:\/\/notizblog.org\/?p=3840"},"modified":"2021-09-28T23:22:11","modified_gmt":"2021-09-28T21:22:11","slug":"html5-input-types-form-validierung-und-wordpress","status":"publish","type":"post","link":"https:\/\/notiz.blog\/2011\/07\/11\/html5-input-types-form-validierung-und-wordpress\/","title":{"rendered":"HTML5, Input-Types, Form-Validierung und WordPress"},"content":{"rendered":"\n
\"HTML5<\/figure>\n\n\n\n

Dass HTML5 ein paar neue input-types definiert, habe ich durch die hcard-input-brainstorming<\/a> so am Rande auf geschnappt, mir aber nichts weiter dabei gedacht… Durch Zufall bin ich heute aber \u00fcber folgenden Tweet<\/a> von Sylvia Egger gesto\u00dfen:<\/p>\n\n\n\n

\n

Just implemented native #HTML5<\/a> form validation on #wp comments form – it' quite simple & should be in #wp default theme<\/p>\n<\/blockquote>\n\n\n\n

und habe bissle recherchiert… Mit den neuen Input-Types ist es doch tats\u00e4chlich m\u00f6glich Input-Felder \u00fcber den Browser validieren zu lassen… Ich bin begeistert! \ud83d\ude42<\/p>\n\n\n\n

Tr\u00e4gt man beispielsweise eine Nicht-Email-Adresse in folgendes Feld…<\/p>\n\n\n

<input<\/span> type<\/span>=\"email\"<\/span> \/><\/span><\/code><\/span>Code-Sprache:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
bekommt man…<\/p>\n\n\n\n
\"Email<\/figure>\n\n\n\n
Sch\u00f6n wenn man sich noch \u00fcber solche Kleinigkeiten freuen kann oder \ud83d\ude09<\/p>\n\n\n\n
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:<\/p>\n\n\n\n
Code-Update<\/strong>: Eric Eggert<\/a> hat mich in den Kommentaren<\/a> darauf hingewiesen, dass man mit <input required \/><\/code> auch noch die Pflichtfelder validieren kann. Danke!<\/ins><\/p>\n\n\n\n
Code-Update 2<\/strong>: Dank maxe<\/a> werden jetzt auch die WordPress Settings ber\u00fccksichtigt (Comment author must fill out name and e-mail) und das "Comment"-Feld ist nat\u00fcrlich auch required<\/code><\/ins><\/p>\n\n\n
<?php<\/span>\n\/*\nPlugin Name: html5 input-types\nPlugin URI: https:\/\/notiz.blog\/\nDescription: Adds the new HTML5 input-types to WordPress' default forms\nVersion: 0.1\nAuthor: pfefferle\nAuthor URI: https:\/\/notiz.blog\/\n*\/<\/span>\n\nadd_filter(\"comment_form_default_fields\"<\/span>, \"change_comment_input_types\"<\/span>);\n\nfunction<\/span> change_comment_input_types<\/span>($fields)<\/span> <\/span>{\n  if<\/span> (get_option(\"require_name_email\"<\/span>, false<\/span>)) {\n    $fields['author'<\/span>] = preg_replace('\/<input\/'<\/span>, '<input required'<\/span>, $fields['author'<\/span>]);\n    $fields['email'<\/span>] = preg_replace('\/\"text\"\/'<\/span>, '\"email\" required'<\/span>, $fields['email'<\/span>]);\n  } else<\/span> {\n    $fields['email'<\/span>] = preg_replace('\/\"text\"\/'<\/span>, '\"email\"'<\/span>, $fields['email'<\/span>]);\n  }\n\n  $fields['url'<\/span>] = preg_replace('\/\"text\"\/'<\/span>, '\"url\"'<\/span>, $fields['url'<\/span>]);\n\n  return<\/span> $fields;\n}\n\nadd_filter(\"get_search_form\"<\/span>, \"change_search_form_input_types\"<\/span>);\n\nfunction<\/span> change_search_form_input_types<\/span>($form)<\/span> <\/span>{\n  return<\/span> preg_replace('\/\"text\"\/'<\/span>, '\"search\"'<\/span>, $form);\n}\n\nadd_filter(\"comment_form_field_comment\"<\/span>, \"change_comment_field_input_types\"<\/span>);\n\nfunction<\/span> change_comment_field_input_types<\/span>($field)<\/span> <\/span>{\n  return<\/span> preg_replace('\/<textarea\/'<\/span>, '<textarea required'<\/span>, $field);\n}\n?><\/span><\/span><\/code><\/span>Code-Sprache:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Funktioniert als Plugin und in Child-Themes (einfach in die functions.php<\/code> kopieren).<\/p>\n\n\n\n
Danke auch an Marc G\u00f6rtz<\/a> der mich \u00fcber Twitter<\/a> reichlich mit Links zu dem Thema versorgt hat:<\/p>\n\n\n\n