How to show all required values in HTML5 tool tip?

Question

Using this to make a radio group required:

<form>
    <input type='radio' name='fruit' value='apple' title='Apple' required />
    <input type='radio' name='fruit' value='banana' title='Banana' />
    <input type='radio' name='fruit' value='orange' title='Orange' />
    <input type='submit' />
</form>

jsFiddle

Submit, and Chrome says "Please select one of these options. Apple" and only the "apple" value radio is highlighted as needing input.

enter image description here

That kind of makes sense. But, if I change all the input to be required, I still receive the same highlighting and message that includes only "Apple".

My questions: for all input covered by the required, is there a syntax to (a) show all titles in the tool tip and (b) highlight all radio in the group?

Interesting. It seems to grab the first title regardless of required status. http://jsfiddle.net/isherwood/P6NAy/1/ — isherwood, Feb 26 '14 at 02:58
This is a chrome specific issue. With firefox all radio buttons are highlighted and the message is : "Please select one of these options." — Ortomala Lokni, Jan 26 '15 at 17:01
does [this answer](http://stackoverflow.com/a/10694930/3961271) provide you with a solution? — Woodrow Barlow, Jul 06 '15 at 14:36
@WoodrowBarlow Almost. While the answer provides a solution for validation, and the question itself alludes to this being undefined behavior for check box groups, I'm looking for a specific conversation on Chrome's display of the tool tip. Chrome's behavior seems buggy to me, reinforced by [@]OrtomalaLokni's FF observation. I'll tag this as Chrome. — bishop, Jul 06 '15 at 14:51

Woodrow Barlow · Accepted Answer · 2019-01-08T21:33:25.867

Edit: this bug has been fixed in Chrome.

tl;dr: This is what I would consider a bug in Chrome. I filed a bug report and there is a workaround that makes it manageable for now.

First of all, see "Web Forms Test Case 21" for a demonstration of what the required attribute means for a set of checkboxes and radio buttons.

The page quotes the official specification. This is as you expected:

For radio buttons, the required attribute shall only be satisfied when exactly one of the radio buttons in that radio group is checked.

That does not, however, address Chrome's behavior regarding the tooltip.

Your stated best-case scenario would be to highlight all the radio buttons and provide a tooltip which lists all the possible selected values. For reference, here is a comparison between Chrome's behavior, and Firefox's behavior.

Note that, in the test case I linked to above, the messages for the radio groups are a little more generic. In that example, the tooltips simply said "Please select one of the options." without specifying any values specifically. The difference here is that you've used the title attribute, and the use case example did not. You can get a more generic message by removing the title attribute.

That really isn't the best way to deal with this. After all, you're not mis-using the attribute, and you shouldn't need to remove it. I've opened a Chromium bug report to track this undesirable behavior. In the meantime, you can change the text of the validation message using Chrome's JavaScript validation API, to try to force a more helpful message.

JavaScript provides a function called setCustomValidity() which allows you to define exactly what the tooltip says. I've whipped up a few lines of jQuery which would modify the message to be a little bit more helpful.

$('input[name="fruit"]')[0].setCustomValidity("Please select one of the fruits.");
$('form').reportValidity();

Here is a live demo showing the tweaked error message.

/* remove default validation */
$('form').attr('novalidate', true);

/* catch the submit event, perform our own validation */
$('form').submit(function(e) {
    e.preventDefault();
    /* if none of the fruits are selected */
    if(!$('input[name="fruit"]:checked').val()) {
        /* set and display our custom message */
        $('input[name="fruit"]')[0].setCustomValidity("Please select one of the fruits.");
        this.reportValidity();
        return;
    }
    /* otherwise, all is good: submit the form. */
    this.submit();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
    <label>
        <input type='radio' name='fruit' value='apple' required >
        Apple
    </label>
    <label>
        <input type='radio' name='fruit' value='banana' required >
        Banana
    </label>
    <label>
        <input type='radio' name='fruit' value='orange' required >
        Orange
    </label>
    <input type='submit'>
</form>

Great answer, thanks! In 22 hours, expect a bounty. :) Indeed, I worked around this "bug" all those months ago with `setCustomValidity`, but that felt all too hackish. Thanks also for opening the Chrome bug report. — bishop, Jul 06 '15 at 16:12

How to show all required values in HTML5 tool tip?

1 Answers1