如何在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”值收音机会突出显示为需要输入。

那种有道理。但是，如果我将{em> all input更改为required，我仍然会收到包含 “Apple”的相同突出显示和消息。< / p>

我的问题：对于input所涵盖的所有required，是否有语法（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>