CODEWITHSUNDEEP
csshtmlvalidation
user429620
user429620

Reputation:

CSS input:invalid incorrectly applied

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/

Upvotes: 7

Views: 168

Answers (1)

CodingIntrigue
CodingIntrigue

Reputation: 78525

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

Upvotes: 8

Related Questions