{"id":441,"date":"2016-09-02T12:32:33","date_gmt":"2016-09-02T11:32:33","guid":{"rendered":"http:\/\/beta.devon.gov.uk\/styleguide\/?page_id=441"},"modified":"2016-09-23T15:31:48","modified_gmt":"2016-09-23T14:31:48","slug":"error-reporting-and-validation","status":"publish","type":"page","link":"https:\/\/www.devon.gov.uk\/standards\/digital-design\/error-reporting-and-validation\/","title":{"rendered":"Error reporting and validation"},"content":{"rendered":"<h2>Top of the page summary<\/h2>\n<p>Errors should appear at the top of the page with links and a error description to the form element in question. This makes it easy for a user to understand where the problem is, and allows them to scroll diirectly to the field\/area where there is an error.<\/p>\n<div class=\"panel\">\n<div class=\"top-error-panel\" aria-labelledby=\"error-summary-heading\" role=\"group\">\n<h2 id=\"error-summary-heading\">Sorry, there is an issue with what you have entered<\/h2>\n<p>The following fields have been incorrectly completed<\/p>\n<ul>\n<li><a href=\"#\">First name field is empty<\/a><\/li>\n<li><a href=\"#\">The email address entered does not use the correct format<\/a><\/li>\n<li><a href=\"#\">Reference number does not follow the correct format<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p>Note: Aria <code>role=group<\/code> and <code>aria-labelledby=\"selected-id\"<\/code> should be added to the container to ensure screen readers can understand what the heading in this box is for.<\/p>\n<h2>Highlighting errors<\/h2>\n<ul>\n<li>Error messages should also be presented inline.<\/li>\n<li>The erroneous field should be highlighted.<\/li>\n<li>Write a message that helps the user to understand why the error occurred and what to do about it.<\/li>\n<\/ul>\n<div class=\"panel\"><label>Email address<\/p>\n<div class=\"error-message\">The email address entered does not use the correct format<\/div>\n<p><\/label><input class=\"error\" type=\"email\" \/><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Top of the page summary Errors should appear at the top of the page with links and a error description to the form element in question. This makes it easy for a user to understand where the problem is, and allows them to scroll diirectly to the field\/area where there is an error. Sorry, there [&hellip;]<\/p>\n","protected":false},"author":945,"featured_media":0,"parent":515,"menu_order":70,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-441","page","type-page","status-publish","hentry"],"acf":[],"publishpress_future_action":{"enabled":false,"date":"2026-05-16 15:25:18","action":"change-status","newStatus":"draft","terms":[],"taxonomy":"","extraData":[]},"publishpress_future_workflow_manual_trigger":{"enabledWorkflows":[]},"_links":{"self":[{"href":"https:\/\/www.devon.gov.uk\/standards\/wp-json\/wp\/v2\/pages\/441","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devon.gov.uk\/standards\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.devon.gov.uk\/standards\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.devon.gov.uk\/standards\/wp-json\/wp\/v2\/users\/945"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devon.gov.uk\/standards\/wp-json\/wp\/v2\/comments?post=441"}],"version-history":[{"count":1,"href":"https:\/\/www.devon.gov.uk\/standards\/wp-json\/wp\/v2\/pages\/441\/revisions"}],"predecessor-version":[{"id":541,"href":"https:\/\/www.devon.gov.uk\/standards\/wp-json\/wp\/v2\/pages\/441\/revisions\/541"}],"up":[{"embeddable":true,"href":"https:\/\/www.devon.gov.uk\/standards\/wp-json\/wp\/v2\/pages\/515"}],"wp:attachment":[{"href":"https:\/\/www.devon.gov.uk\/standards\/wp-json\/wp\/v2\/media?parent=441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}