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

前端之家收集整理的这篇文章主要介绍了jQuery:带有必需select元素的HTML 5表单无效前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我一直在使用$(‘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中,选择’test’会说它有效.选择“请选择”将表示其无效.

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

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

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

解决方法

在我看来像一个Safari bug.验证器是正确的,但只是第二次调用它.当您调用is(‘:invalid’)时,它将返回先前的验证.

我尝试了你的例子,并调用(this.validity()),但它返回相同的东西.只有CSS是准确的!

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

UPDATE
在任何验证发生之前,change()事件都会触发.发出警报(‘这里’);在你的.is前面(‘:无效’);显示该元素仍然是无效CSS属性中的“红色”.

如果您在经过一段时间后尝试验证,请通过window.setTimeout(doValidateTest(这个),10)或者某些,那么它可能会正确返回.

原文链接:https://www.f2er.com/jquery/180699.html

猜你在找的jQuery相关文章