How to programmatically display HTML5 client-side validation error bubbles?

Question

I'm trying to use HTML5 client-side validation outside a form/submit context, but cannot see how to display the validation error bubbles. Consider the following:

<input type="text" id="input" pattern="[0-9]" required oninvalid="alert('yes, invalid')">
<button onclick="alert(document.getElementById('input').checkValidity())">Check</button>

Everything works as expected, with the correct value being returned from checkValidity, and the invalid event being sent and displayed, but how do I programmatically display the validation error bubble?

Nickolay · Accepted Answer · 2012-08-07T07:21:50.120

5

If you're talking about this bubble:

Validation bubble in Firefox

See ScottR's comment to this answer instead.

~~...then my testing shows that both Firefox and Chrome display it when calling checkValidity on an element wrapped in a <form> (testcase), but not on a standalone element (testcase).~~

There doesn't seem to be a mechanism to display it when there's no form, and the spec doesn't even say it has to be displayed in response to programmatic checkValidity calls (on the element or the form) -- only when submitting a form.

So for now, wrap your elements in a form, even if you will not actually submit it.

Better yet, use your own validation UI, this will shield you from future changes in the browsers in this underspecified area.

edited Aug 07 '12 at 07:21

answered Nov 27 '11 at 20:14

Nickolay

31,095
13
107
185

Thank you. It seems to me that the bubbles are **not** displayed when checkValidity is called, whether on element or on form; they seem to be displayed only when the form is submitted, perhaps in conjunction with the onsubmit event (you can return false from the handler to prevent the event from actually being submitted). – Nov 28 '11 at 02:47
4

This accepted answer is not correct. Chrome 19, 20, and 21 do not show validation bubbles when calling `element.checkValidity()`; the first element with an error has that error shown in a bubble when a user clicks a button that submits the form. – Scott R Aug 01 '12 at 21:00
@ScottR: see the testcase in the amended answer. I'm not sure why you think the answer is not correct. – Nickolay Aug 05 '12 at 16:24
4

Clicking a ` – Scott R Aug 06 '12 at 20:17
@ScottR: thanks for the clarification! I didn't verify your theory, but it seems to be right. (Not sure what's the SO etiquette for this case though!) – Nickolay Aug 07 '12 at 07:25

score 0 · Answer 2 · answered Nov 27 '11 at 20:03

0

Try using required="required" and getting rid of the oninvalid handler unless you really need it.

http://blog.mozilla.com/webdev/2011/03/14/html5-form-validation-on-sumo/

Example of this working: https://support.mozilla.com/en-US/users/register

answered Nov 27 '11 at 20:03

batman

1,447
5
16
27

Actually, just the `required="required"` should be enough. – batman Nov 27 '11 at 20:04

score -1 · Answer 3 · answered Jul 17 '13 at 14:32

Just set manually "invalid" attribute to incorrect fields. Small example:

var form = $('#myForm').get(0);
if(typeof formItem.checkValidity != 'undefined' && !formItem.checkValidity()) {
    $('input:required').each(function(cnt, item) {
        if(!$(item).val()) {
            $(item).attr('invalid', 'invalid');
        }
    });
    return false;
}

How to programmatically display HTML5 client-side validation error bubbles?

3 Answers3

Linked