jQuery：带有必需选择元素的无效 HTML 5 表单答案

【问题标题】：jQuery :invalid HTML 5 form with required select elementjQuery：带有必需选择元素的无效 HTML 5 表单
【发布时间】：2011-12-10 14:02:38
【问题描述】：

如果浏览器支持模式属性if(Modernizr.input.pattern) {}，我一直在使用$('select[required]').is(':invalid')，它在Firefox 4-7 中运行良好，但Chrome 和Safari 都有问题。

所有其他验证工作正常，它只需要选择菜单，即<select required><option></option></select>

这是我的 jsfiddle：http://jsfiddle.net/mbCbt/。基本上，您选择一个下拉项目，它意味着验证它。

在 Firefox 中，选择“测试”将表明其有效。选择“请选择”表示无效。

在 Safari/Chrome 中，选择“测试”会显示无效，然后选择“请选择”会使其有效。再次选择测试将使其无效。从那里，选择test2，它将是VALID，然后再次选择test，它将是有效的。

我假设它是一个 jQuery 的东西，因为浏览器正在从 CSS 中识别它的有效性......

想法？我意识到该功能实际上并没有任何官方支持（不在 jquery kb 中），但我希望有另一种解决方法。我已经降低了对旧浏览器的验证检查，所以也许我应该退回到 webkit 的验证检查？

【问题讨论】：

required='required' 是标准语法，但我在您的示例中尝试过......似乎没有什么不同。
嗯，谢谢没想到。可惜这两种方式都不起作用......所需的 W3C 规范使用 <input id="username" type=email required name=un> 作为示例，所以这就是我想只使用 required 的原因。
刚刚想到...也许是时间问题。我会试试的。
是的，就是这张票。在 HTML5/CSS 验证发生之前会触发 change() 事件。只需输入 alert('here');在test前面，可以看到SELECT还是红色的。

【解决方案1】：

在我看来就像一个 Safari 错误。验证器是正确的，但只是第二次调用它。当你调用 is(':invalid') 时，它会返回之前的验证。

我尝试分叉您的示例，并调用 (this.validity())，但它返回相同的内容。只有 CSS 是准确的！

我不知道如何轻松地得到这个——DOM 不返回 CSS 的值。我尝试检查 $(this).css('border') 和 this.style.borderColor 以获得结果，没有骰子。

更新 change() 事件在任何验证发生之前触发。发出警报（'这里'）；在你的 .is(':invalid'); 前面显示无效 CSS 属性的元素仍然是“红色”。

如果您在经过一段时间后尝试验证，请通过 window.setTimeout(doValidateTest(this),10) 或类似的东西，那么它可能会正确返回。

【讨论】：