{"id":1204,"date":"2024-05-31T14:08:59","date_gmt":"2024-05-31T18:08:59","guid":{"rendered":"http:\/\/philsinatra.net\/blog\/?p=1204"},"modified":"2024-05-31T15:03:30","modified_gmt":"2024-05-31T19:03:30","slug":"form-validation","status":"publish","type":"post","link":"https:\/\/philsinatra.net\/blog\/form-validation\/","title":{"rendered":"Form validation"},"content":{"rendered":"\n<p>This CSS code styles invalid form input elements and their associated labels. Let&#8217;s break it down in detail:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Styling Invalid Inputs<\/h3>\n\n\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\ninput:user-invalid {\n  border: 2px solid red;\n  outline: 4px solid red;\n}\n<\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>input:user-invalid<\/code><\/strong>: This selector targets input elements that are in an invalid state, specifically when the user has interacted with them, triggering a validation error.<\/li>\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Styling Labels Containing Invalid Inputs<\/h3>\n\n\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\n:has(input:user-invalid) label {\n  color: red;\n}\n<\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>:has(input:user-invalid) label<\/code><\/strong>: This selector targets any label element that contains an input element in an invalid state.<\/li>\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. Prepending an Icon to Labels with Invalid Inputs<\/h3>\n\n\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\nlabel:has(+ input:user-invalid)::before {\n  content: &quot;&amp;#x2716;&quot;;\n  color: red;\n}\n<\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>label:has(+ input:user-invalid)::before<\/code><\/strong>: This selector targets label elements that are immediately followed by an input element in an invalid state and adds a pseudo-element before the label&#8217;s content.<\/li>\n\n\n\n<li><strong><code>content: \"&#x2716;\";<\/code><\/strong>: Inserts a red &#8220;&#x2716;&#8221; (cross mark) symbol before the label text, indicating an error.<\/li>\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Summary<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The <code>input:user-invalid<\/code> selector applies red styling directly to invalid input elements, making them appear erroneous.<\/li>\n\n\n\n<li>The <code>:has<\/code> selector is used to style parent label elements containing invalid inputs by changing the label&#8217;s text color to red.<\/li>\n\n\n\n<li>Another <code>:has<\/code> The selector, combined with a pseudo-element, prepends a red &#8220;&#x2716;&#8221; symbol before labels associated with invalid inputs. This visually indicates which label is linked to the invalid input.<\/li>\n<\/ul>\n\n","protected":false},"excerpt":{"rendered":"<p>This CSS code styles invalid form input elements and their associated labels. Let&#8217;s break it down in detail: 1. Styling Invalid Inputs input:user-invalid { border: 2px solid red; outline: 4px solid red; } 2. Styling Labels Containing Invalid Inputs :has(input:user-invalid) label { color: red; } 3. Prepending an Icon to Labels with Invalid Inputs label:has(+ [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[183],"tags":[192],"class_list":["post-1204","post","type-post","status-publish","format-standard","hentry","category-web-development","tag-css"],"_links":{"self":[{"href":"https:\/\/philsinatra.net\/blog\/wp-json\/wp\/v2\/posts\/1204","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/philsinatra.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/philsinatra.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/philsinatra.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/philsinatra.net\/blog\/wp-json\/wp\/v2\/comments?post=1204"}],"version-history":[{"count":3,"href":"https:\/\/philsinatra.net\/blog\/wp-json\/wp\/v2\/posts\/1204\/revisions"}],"predecessor-version":[{"id":1219,"href":"https:\/\/philsinatra.net\/blog\/wp-json\/wp\/v2\/posts\/1204\/revisions\/1219"}],"wp:attachment":[{"href":"https:\/\/philsinatra.net\/blog\/wp-json\/wp\/v2\/media?parent=1204"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/philsinatra.net\/blog\/wp-json\/wp\/v2\/categories?post=1204"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/philsinatra.net\/blog\/wp-json\/wp\/v2\/tags?post=1204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}