如何在 HTML5 工具提示中显示所有必需的值？

Question

使用它来创建需要的广播组：

<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

提交，Chrome 会说“请选择其中一个选项。Apple”，只有“apple”值单选突出显示为需要输入。

这样说的有道理。但是，如果我将 all input 更改为 required，我仍然会收到相同的突出显示和消息，其中包含 only“Apple”。

我的问题：对于required 涵盖的所有input，是否有语法来 (a) 在工具提示中显示所有标题和 (b) 突出显示组中的所有电台？

Answer 1

编辑：此错误已在 Chrome 中修复。

---

tl;dr：这是我认为 Chrome 中的错误。我提交了一个bug report 并且有一个解决方法使它现在可以管理。

首先，请参阅“Web Forms Test Case 21”，了解required 属性对一组复选框和单选按钮的含义。

页面引用official specification。正如您所料：

对于单选按钮，required 属性只有在该单选组中的一个单选按钮被选中时才会满足。

但是，这并不能解决 Chrome 与工具提示有关的行为。

您陈述的最佳情况是突出显示所有单选按钮并提供一个工具提示，其中列出了所有可能的选定值。作为参考，here 是 Chrome 的行为和 Firefox 的行为之间的比较。

请注意，在我上面链接的测试用例中，无线电组的消息更加通用。在该示例中，工具提示只是说“请选择其中一个选项”。没有具体指定任何值。这里的区别在于您使用了title 属性，而用例示例没有。您可以通过删除 title 属性来获得更通用的消息。

这确实不是处理这个问题的最佳方法。毕竟，您并没有误用该属性，也不需要删除它。我打开了Chromium bug report 来跟踪这种不良行为。同时，您可以使用 Chrome 的 JavaScript 验证 API 更改验证消息的文本，以尝试强制显示更有帮助的消息。

JavaScript 提供了一个名为setCustomValidity() 的函数，它允许您准确定义工具提示的内容。我已经编写了几行 jQuery，它们可以修改消息以提供更多帮助。

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

这是一个 live demo 显示调整后的错误消息。

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