How to accept Decimal values in Foundation 6

Question

I have a form field built in Foundation 6 but it does not allow for decimal input.

HTML

<input type="number" name="decimal_amount" max="10" placeholder="" required>

When I enter 8.5 I get this error:

Please enter a valid value. The two nearest values are 8 and 9.

Here is the entire HTML block:

    <head>
    <!-- Foundation CSS via CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.1.2/foundation.min.css">
    <!-- 1140px Grid styles for IE -->
    <!--[if lte IE 9]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" /><![endif]-->
    <!-- The 1140px Grid - http://cssgrid.net/ -->
    <link rel="stylesheet" href="../css/1140.css" type="text/css" media="screen" />
    <!--css3-mediaqueries-js - http://code.google.com/p/css3-mediaqueries-js/ - Enables media queries in some unsupported browsers-->
    <script type="text/javascript" src="../js/css3-mediaqueries.js"></script>
    <!-- Foundation JavaScript via CDN -->
    <script src="https://cdn.jsdelivr.net/foundation/6.1.2/foundation.min.js"></script>
    </head>
        <div class="large-6 columns">
          <label class="left">Ranking (scale 1-10, decimals allowed)
            <input type="number" name="decimal_amount" max="10" placeholder="" required>
          </label>
        </div>

<script src="js/vendor/jquery.min.js"></script>
<script src="js/foundation.min.js"></script>
<script>
    $(document).foundation();
</script>
</body>

Here is the error console

Are you using abide validation? Where exactly is the error coming from? — Yass, Apr 11 '16 at 19:38
Not sure on the abide validation. How would I discover that? And the error is a pop-up from Foundation. Thanks for helping @Yass — H. Ferrence, Apr 11 '16 at 20:16
Abide validation is one of the Foundation plugins, which you're probably not using (as you're not sure about it). Are you using custom jquery code for validation or are you relying on the built-in html5 functionality? Would it be possible to post more of the html content and any custom javascript you're using? — Yass, Apr 11 '16 at 20:18
Ok. then I am not using abide as I have been use pure Foundation. Not even any custom javascript. I'll update the OQ with more HTML — H. Ferrence, Apr 11 '16 at 20:20
I've copied your code into a [fiddle](https://jsfiddle.net/yassarikhan786/8tn7x4mj/) and I'm not seeing the error message you're seeing. — Yass, Apr 11 '16 at 20:25
Do you have any errors in the console? Also, it appears that you're referencing the Foundation library twice (once in the head and again at the bottom of the body) — Yass, Apr 11 '16 at 20:28
I tried your fiddle and it does not render any of the errors I get including when I enter an 11 that is over the max. — H. Ferrence, Apr 11 '16 at 20:29
At the bottom of the body is fine. Which version of jquery are you using? — Yass, Apr 11 '16 at 20:31
Make sure you reference jQuery before it's used. Remove the reference to foundation.min.js from the `head` as you've got a reference in the `body`. — Yass, Apr 11 '16 at 20:38
I removed the Foundation lib from the and I still cannot enter a decimal value. — H. Ferrence, Apr 11 '16 at 20:41
I can't replicate your issue so I'm not sure what the problem is. The `max` attribute doesn't appear to work as expected in a fiddle. I've also tried it in a CodePen without any external libraries and it isn't working. — Yass, Apr 11 '16 at 20:47

score 3 · Accepted Answer · answered Apr 13 '16 at 15:01

3

It is really a question of HTML5. Add the step="0.1" to the input to describe the type of decimal precision. Here is an example to the 100th's.

<input type="number" name="decimal_amount" max="10" step="0.01" placeholder="" required>

http://www.w3.org/TR/2012/WD-html5-20121025/common-input-element-attributes.html#attr-input-step

answered Apr 13 '16 at 15:01

Chris O

689
8
22

Excellent. Thank you @ChrisO. That did it for me. – H. Ferrence Apr 18 '16 at 17:00

How to accept Decimal values in Foundation 6

1 Answers1