17

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?

Improve this question
0

3 Answers 3

Reset to default
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.

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

5 Comments

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).
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.
@ScottR: see the testcase in the amended answer. I'm not sure why you think the answer is not correct.
Clicking a <button> element submits the form, which triggers the visibility of the error message. The checkValidity() call is not what causes the message to appear; adding return false; to the end of the onclick code will prevent the error message from appearing, because the click event doesn't bubble to the form (which would then trigger a submit event). The spec states that the default type of a button is submit, and if you change this to type="button", it also prevents the error from showing.
@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!)
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

Improve this answer

1 Comment

Actually, just the required="required" should be enough.
-1

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;
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.