jQuery :具有必需的select元素的HTML5表单无效

Question

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

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

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

在firefox中，选择'test‘将显示它是有效的。选择“请选择”将显示无效。

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

我假设这是一个jQuery的东西，因为浏览器可以从CSS中识别出它的有效性。

有什么想法？我意识到这个函数实际上没有任何官方支持(在jquery知识库中没有)，但我希望有另一种方法来绕过它。我已经降低了对旧浏览器的验证检查，所以也许我应该回到webkit的验证检查上来？

Answer 1

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

我尝试了派生您的示例，并调用(this.validity())，但它返回相同的结果。只有CSS才是准确的！

我对如何轻松地实现这一点感到困惑-- DOM不返回CSS的值。我试着检查$(This).css(‘this.style.borderColor’)和边框以得到一个结果，没有任何结果。

更新在任何验证发生之前触发()事件。在您的.is(': invalid ')；前面放置一个警告(‘here’)；表明该元素仍然是来自无效CSS属性的“红色”。

如果您尝试在经过一段时间后通过window.setTimeout(doValidateTest(this),10)或诸如此类的方式进行验证，那么它很可能会正确返回。