1 Star2 Stars3 Stars4 Stars5 Stars (9 votes, average: 5.00 out of 5)

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.

<form>
<input type="number" name="price">
<input type="submit" value="submit">
</form>

This will result in a blank box.

Tip: Click on images to make them larger. If you find anything wrong on this page or need further assistance please comment below or contact me. 🙂
Blank Number Box in HTML5

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

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.

Subscribe To My YouTube Channel:
<form>
   <input type="number" step="any" name="price">
   <input type="submit" value="submit">
</form>

Other Examples of Step in HTML5

Here are some other examples of how you can use the step attribute.

<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>

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

Example of Specifying Decimal Integers in MySql

 

Please Enter A Valid Value HTML5 Number Input was last modified: November 16th, 2018 by Maximus Mccullough

Please like, share and subscribe.

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider a tip for the content.

One Time Tip

more tips

Reoccuring Tips

Tips

Cool People Share:
Please-Enter-A-Valid-Value-HTML5-Number-Input

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.