CSS input: applied incorrectly incorrectly.

Question

I have this fiddle:

http://jsfiddle.net/rkTCq/

The code is just a type number input field with a pattern

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

CSS adds a red border if the input is invalid:

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

However, if I dial 1.3 and then exit the field, I get a red border, although this is true according to the pattern. What is wrong here?

PS: This is a safari.

Edit: OK, I added step = "any" and this seems to fix it. Can you guys confirm?

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

Answer 1

You have defined input as type=number . As described in this article, for correct validation, floats must be explicitly enabled using the step attribute.

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

Add the step attribute: step="any" to your input:

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

In addition, according to MDN, the pattern not of type number :

This attribute is used when the value of the type attribute is text, search, tel, url, or email; otherwise it is ignored