jQuery：带有必需select元素的HTML 5表单无效

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

所有其他validation工作正常，它只需要选择菜单，即

这是我的jsfiddle： http ： //jsfiddle.net/mbCbt/ 。 基本上，您选择一个下拉项，它的意思是validation它。

在firefox中，选择’test’会说它有效。 选择“请选择”将表示其无效。

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

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

思考？ 我意识到这个函数没有任何官方支持（不是在jquery kb中），但我希望还有另一种解决方法。 我已经降低了对旧浏览器的validation检查，所以也许我应该回到webkit的那个？

Answer 1

在我看来像一个Safari bug。 validation器是正确的，但只是第二次调用它。 当您调用is（’：invalid’）时，它将返回先前的validation。

我尝试了你的例子，并调用（this.validity（）），但它返回相同的东西。 只有CSS是准确的！

我很难理解如何轻松获得这个 – DOM不会返回CSS的值。 我试着检查$（this）.css（’border’）和this.style.borderColor来获得结果，没有骰子。

更新在任何validation发生之前，change（）事件都会触发。 发出警报（’这里’）; 在你的.is前面（’：无效’）; 显示该元素仍然是无效CSS属性中的“红色”。

如果您在经过一段时间后尝试validation，通过window.setTimeout（doValidateTest（this），10）或其他一些，那么它可能会正确返回。