How to show all necessary values ​​in tooltip of HTML5 tool?

Question

Using this to make a group of radio stations:

<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 radio “apple” value is highlighted as needed for input.

It makes sense. But if I changed everything inputto required, I still get the same highlight and message that only includes "Apple".

My questions are: for everyone inputcovered required, is there a syntax for (a) show all the headers in the tooltip and (b) highlight all the radio in the group?

Answer 1

: Chrome.

---

tl; dr: , Chrome. , , .

, " 21 - " , required .

. :

required , .

, , Chrome .

, , . , Chrome Firefox.

, , , . : ", ". - . , title, - . , title.

. , , . Chromium, . API Chrome JavaScript, .

JavaScript setCustomValidity() , . jQuery, , .

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

, .

/* 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>

Hide result