CSS输入:无效的错误应用

Question

我有这个小提琴:

http://jsfiddle.net/rkTCq/

代码只是带有模式的类型编号的输入字段

pattern="[0-9]+(\.[0-9]+)?"

如果输入无效,CSS会添加红色边框:

input:invalid { border:1px solid red; }

但是,如果我输入1.3然后标出字段,我会得到一个红色边框,即使根据模式这是正确的.这有什么不对？

PS:这是在野生动物园.

编辑:好的,我添加了step ="any",这似乎解决了它.你们能证实吗？

http://jsfiddle.net/rkTCq/2/

Answer 1

您已将输入定义为type=number.如本文所述,必须使用该step属性明确允许浮点数才能正确验证.

https://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

step="any"在您的输入中添加一个步骤属性:

<input type="number" name="quantity" class="form-control" placeholder="Quantity" tabindex="2" step="any">

另外,根据MDN pattern不适用于以下number类型:

当type属性的值为text,search,tel,url或email时,此属性适用; 否则会被忽略