{
  "path": "/2011/07/11/html5-input-types-form-validierung-und-wordpress/",
  "site": "at://did:plc:ug27jry5yq3ljscgvodxnic5/site.standard.publication/3mhsw2hrludgc",
  "tags": [
    "child theme",
    "FediBlog",
    "hCard",
    "HTML5",
    "input-types",
    "Plugin",
    "WordPress"
  ],
  "$type": "site.standard.document",
  "title": "HTML5, Input-Types, Form-Validierung und WordPress",
  "updatedAt": "2021-09-28T21:22:11.000Z",
  "bskyPostRef": {
    "cid": "bafyreig7mzmzldnv322tvnyhltnu53227r4g33idjqmoyv3knvaub6glci",
    "uri": "at://did:plc:ug27jry5yq3ljscgvodxnic5/app.bsky.feed.post/3mk3t4fj4dxue"
  },
  "description": "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...",
  "publishedAt": "2011-07-11T18:46:37.000Z",
  "textContent": "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: A Form of Madness (den hab ich selber gefunden) HTML5 Pattern Fallback jQuery Validator Testen könnt ihr das übrigens hier auf notiz.blog."
}