Validate 0.5 as Step Value in HTML5 Number Input

Question

I want to have an input field which only allows to type whole numbers or .5 decimal numbers. e.g. 0, 0.5, 1, 1.5, 2, 2.5.......etc etc

I am trying to do this with a HTML5 input field as so

<input type="number" min="0" max="18" step="0.5" pattern="\d+" />

but it won't validate the number when it is on a half step of 0.5. It just stays red when clicking outside / validating.

Is this possible? I can't find similar example of how to validate for half steps. DO I need to use jQuery to achieve this?

Thanks

Fiddle Demo http://jsfiddle.net/b8NrE/906/

Answer 1

Remove the pattern attribute. This is used for complex validation that requires regular expressions (and your regular expression is only matching sequences of digits). As it is, stipulating min, max, and step already define all the validation that you need:

<input type="number" min="0" max="18" step="0.5" />

http://jsfiddle.net/b8NrE/907/