CSS input:invalid incorrectly applied
css, html, validation
Solution
You've defined the input as `type=number`. As described in this article, floats must be explictly allowed using the `step` attribute in order to correctly validate.
https://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/
Add a step attribute: `step="any"` to your input:
<input type="number" name="quantity" class="form-control" placeholder="Quantity" tabindex="2" step="any">
Additionally, according to MDN `pattern` does not apply to the `number` type:
This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored
Problem
I have this fiddle: http://jsfiddle.net/rkTCq/ The code is simply an input field of type number with pattern ``` pattern="[0-9]+(\.[0-9]+)?" ``` CSS adds a red border if input is invalid: ``` input:invalid { border:1px solid red; } ``` However, if I type 1.3 and then tab out the field, I get a red border, even though this is correct according to the pattern. What is wrong here? PS : This is in safari. Edit: OK, i added step="any" and this seems to fix it. Can you guys confirm? http://jsfiddle.net/rkTCq/2/