Please Enter A Valid Value HTML5 Number Input

The number attribute in HTML5 may give you a warning, “Please Enter A Valid Value”. Using decimals in HTML5 requires that you use an attribute of “step”. Consider the following in the form tag element.
[code]<form>
<input type="number" name="price">
<input type="submit" value="submit">
</form>[/code]
This will result in a blank box.

Blank Number Box in HTML5

When entering a decimal value into the box you may get a warning. After you click the submit button you will see something that looks like this.

Number Box in HTML5 With Warning

HTML5 Input Default for Numbers

As you can see the default for HTML5 is whole numbers. In order to use a decimal you have to use a step attribute. See code below.
[code]<form>
<input type="number" step="any" name="price">
<input type="submit" value="submit">
</form>
[/code]

Other Examples of Step in HTML5

Here are some other examples of how you can use the step attribute.
[code]<form>
<input type=number step=1 > Whole Numbers
<input type=number step=0.01 >Decimals
<input step="any" type="number" > Whole or Decimals
<input step="10" type="range" > Range of 10
<input type="submit" ></form>
[/code]

When Processing Forms With Decimals

Remember that when you are processing forms with decimals you must have your database set up properly. For example if you want to use integers in your mySql database with decimals you must specify it.

Example of Specifying Decimal Integers in MySql

Use decimal(4,2) if you want to be able to store numbers like 1452.87 or xxxx.xx.

Example of Specifying Decimal Integers in MySql