html5 后台 统计 显示,如何在HTML5工具提示中显示所有必需的值？

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

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

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

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

但是,这并不能解决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();

});

Apple

Banana

Orange