jQuery :invalid HTML 5 form with required select element

Question

我一直在使用 $('select[required]').is(':invalid')如果浏览器支持 pattern 属性 if(Modernizr.input.pattern) {} , 它在 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 的验证检查？

Answer 1

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

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

我对如何轻松获得它感到困惑 - DOM 不返回 CSS 的值。我尝试检查 $(this).css('border') 和 this.style.borderColor 以获得结果，没有骰子。

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

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