{"id":25,"date":"2012-05-05T09:52:50","date_gmt":"2012-05-05T09:52:50","guid":{"rendered":"http:\/\/www.w3.org\/community\/html5spec\/?p=25"},"modified":"2012-05-05T10:06:13","modified_gmt":"2012-05-05T10:06:13","slug":"when-a-form-should-start-validation","status":"publish","type":"post","link":"https:\/\/www.w3.org\/community\/html5spec\/2012\/05\/05\/when-a-form-should-start-validation\/","title":{"rendered":"When A Form Should Start Validation?"},"content":{"rendered":"<p>Let&#8217;s take a look to this simple demo form:<br \/>\n<a href=\"http:\/\/www.richstyle.org\/demo-form.html\" target=\"_blank\" rel=\"nofollow\">http:\/\/www.richstyle.org\/demo-form.html<\/a><\/p>\n<p>I use the following code to style the validation issue:<\/p>\n<pre>\r\ninput:required + output::after,\r\ntextarea:required + output::after { content: '*'; }\r\n\r\ninput:invalid + output::after,\r\ntextarea:invalid + output::after { content: '\u2a09';color: maroon }\r\n\r\ninput:valid + output::after,\r\ntextarea:valid + output::after { content: '\u2713';color: green }\r\n<\/pre>\n<p>The only thing looks unacceptable, is that the form validation process starts just when the form is loaded, whilst, it&#8217;s much better to start it in each input field independently,  as user starts write something in it.<\/p>\n<p>So, I thought of inventing a new attribute called &#8220;start-validation&#8221; with the following values:<\/p>\n<pre>\r\nform {\r\n\tstart-validation: on-load | on-focus | on-type | on-blur | on-submit;\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Let&#8217;s take a look to this simple demo form: http:\/\/www.richstyle.org\/demo-form.html I use the following code to style the validation issue: input:required + output::after, textarea:required + output::after { content: &#8216;*&#8217;; } input:invalid + output::after, textarea:invalid + output::after { content: &#8216;\u2a09&#8217;;color: maroon &hellip; <a href=\"https:\/\/www.w3.org\/community\/html5spec\/2012\/05\/05\/when-a-form-should-start-validation\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":891,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"yes","footnotes":""},"categories":[5],"tags":[],"class_list":["post-25","post","type-post","status-publish","format-standard","hentry","category-forms"],"_links":{"self":[{"href":"https:\/\/www.w3.org\/community\/html5spec\/wp-json\/wp\/v2\/posts\/25","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.w3.org\/community\/html5spec\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.w3.org\/community\/html5spec\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.w3.org\/community\/html5spec\/wp-json\/wp\/v2\/users\/891"}],"replies":[{"embeddable":true,"href":"https:\/\/www.w3.org\/community\/html5spec\/wp-json\/wp\/v2\/comments?post=25"}],"version-history":[{"count":7,"href":"https:\/\/www.w3.org\/community\/html5spec\/wp-json\/wp\/v2\/posts\/25\/revisions"}],"predecessor-version":[{"id":32,"href":"https:\/\/www.w3.org\/community\/html5spec\/wp-json\/wp\/v2\/posts\/25\/revisions\/32"}],"wp:attachment":[{"href":"https:\/\/www.w3.org\/community\/html5spec\/wp-json\/wp\/v2\/media?parent=25"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.w3.org\/community\/html5spec\/wp-json\/wp\/v2\/categories?post=25"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.w3.org\/community\/html5spec\/wp-json\/wp\/v2\/tags?post=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}