jQuery：无效的HTML 5表单与所需的select元素 [英] jQuery :invalid HTML 5 form with required select element

问题描述

如果浏览器支持模式属性 $（'select [required]'）is（'：invalid'） > 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

strong>
在发生任何验证之前，change（）事件正在触发。提醒（'here'）;在你的.is前面（'：无效'）;显示该元素仍然是来自无效CSS属性的红色。

如果您在经过的时间之后尝试验证，请通过
window.setTimeout（doValidateTest （这），10）
或其他，那么它可能会正确返回。

I've been using $('select[required]').is(':invalid') if the browser supports the pattern attribute if(Modernizr.input.pattern) {}, and it works fine in Firefox 4-7, but Chrome and Safari are both having issues.

All other validations work fine, its just required select menus i.e. <select required><option></option></select>

Here's my jsfiddle: http://jsfiddle.net/mbCbt/. Basically, you select a drop down item, and its meant to validate it.

In firefox, selecting 'test' will say its valid. Selecting 'please select' will says its invalid.

In Safari/Chrome, selecting 'test' will say invalid, then selecting 'please select' will make it it VALID. Selecting test again will make it invalid. From there, select test2 and it will be VALID, then select test again, and it will be valid this time.

I assume its a jQuery thing, because the browser is recognising its valid from the CSS...

Thoughts? I realise there isn't really any official support for the function (not in the jquery kb), but I'm hoping there's another way around it. I have degraded validation checking for older browsers so maybe I should just drop back to that for webkit?

解决方案

Looks to me like a Safari bug. The validator is correct, but only the second time it is called. When you call is(':invalid'), it's returning the previous validation.

I tried forking your example, and calling (this.validity()), but it returns the same thing. Only the CSS is accurate!

I'm stumped at how to easily get this - the DOM doesn't return the value of the CSS. I tried checking the $(this).css('border') and this.style.borderColor to get a result, no dice.

UPDATE The change() event is firing before any validation has happened. Putting an alert('here'); in front of your .is(':invalid'); shows that the element is still "red" from the invalid CSS attribute.

If you attempt the validation after an elapsed time, via window.setTimeout(doValidateTest(this),10) or somesuch, then it will likely return correctly.

这篇关于jQuery：无效的HTML 5表单与所需的select元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！