HTML5 forms - semantic way of displaying errors from php validation

Question

I'm building a html5 form. To validate it at first I use html5 validate mechanisms (patterns, required, etc...), and then PHP server side validation. I'm writting it as a library, so I can't predict all possible cases.

For example, I've got email input:

<input type="email" name="mail" placeholder="[email protected]" />

Now I'm checking with php if the domain: domain.com exists (* - see footnote).

If no, PHP render the form once more but should display error near the input that has validation mistakes.

HOW TO DO THAT SEMANTICALY? What html element is good for it?

I will give some wrong examples to ilustrate my problem (I will write only important fragments of code) :

<label for="mail">Email:</label>
<input type="email" name="mail" id="mail" /> - given mail does not exist

Error without of html5 element. This is what I found to be most popular on websites, and most hopeless (stupid - no offense :) ) solution...

<label for="mail">Email (given mail does not exist):</label>
<input type="email" name="mail" id="mail" />

Is the error realy a label fragment? Or label is label, and error is not a fragment of label. In that case labels can be diferent (according to a given mail). Is this semantic?

<label for="mail">Email</label>
<input type="email" name="mail" id="mail" />       
<span class="error">Given mail does not exist</span>

No idea solution. Span can be used here, but this is another no better idea solution.

Another ideas:

<details> - this isn't a detail...
<aside> - this isn't aside, this is important!
<mark>, <strong>, <emph> - with a given class?

Thanks for Your time and ideas. I know that even complicated error handling can be done using html5 validation methods, but there should be an object that is the best for showing such things in html5 semantic (for example for blind people - imagine the screen reader application, form filling by such a person by voice, and the first stupid solution usage. The screen reader should read whole page to hear just one error...)

Best regards

PS. If someone think, that there are better problems on earth (:D), yes of course there are. But we are those, who try to make the web more clean and available. And we really should take care about such details.

(*) which is not that easy in html5 You must use ajax, with php function, and override default Error handling mechanisms with Your own texts, and much much more...).

Yeah. I read my question once more, and this is possible :). — Jacek Kowalewski
– Jacek Kowalewski, Commented Feb 10, 2014 at 10:41

Karl Groves · Accepted Answer · 2016-08-19 14:06:02Z

1

In order for an error message to be announced by assistive technology, it has to be associated with the field. When a screen reader arrives on a form, it triggers what's known as "forms mode" and at that point it will only read out that which is associated with the fields themselves.

<label for="mail">Email</label>
<input type="email" name="mail" id="mail" aria-describedby="email_error" />       
<span class="error" id="email_error">Given mail does not exist</span>

In the above example, the use of aria-describedby allows you to create an explicit reference between the field and the error, which will ensure it is announced by screen readers.

answered Aug 19, 2016 at 14:06

Karl Groves

262 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

albert · Accepted Answer · 2016-08-13 06:10:56Z

1

semantics are debatable; that said, the "stupid, no offense" example is the most semantic approach, except its better practice to wrap the message in a span element.
don't let that semantically lacking span fool you: this approach is for addressing accessibility support.
semantics are being used properly here, as this markup is displaying the correct information, its just not an audience that most people realize exists.
Read more about this technique here: Simple inline error message pattern

answered Aug 13, 2016 at 6:10

albert

8,1013 gold badges49 silver badges64 bronze badges

Collectives™ on Stack Overflow

HTML5 forms - semantic way of displaying errors from php validation

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related