HTML input type=number step prevents form from submitting

Question

I have this code in HTML:

<input type="number" step="0.1" class="form-group">

I want the user to be able to enter a 3-digit decimal number like 1.234 but step needs to be 0.1 and it throws an error and prevents the form from submitting.

I've already tried step="0.100" but the result was the same.

I also need to validate other inputs so I can't use no validate in the <form> tag.

What needs to be done?

Can you explain this in a bit more detail? You say `step` needs to be `0.1`, but it should allow a value like `1.234`. Does this mean you want values like `0.134`, `0.234`, `0.334`, etc? 3 decimals, but a step of 0.1? — Brett DeWoody, Jun 27 '19 at 07:36
@mplungjan because not all the users use the 3-digit decimal. — Alireza A2F, Jun 27 '19 at 07:41
then you can't have values like 1.234 . you can have either one or the other, not both. — cloned, Jun 27 '19 at 07:43
@AlirezaA2F You could completely remove the `step` variable and add eventlisteners to manually manage the step — nick zoum, Jun 27 '19 at 07:46
https://stackoverflow.com/questions/11738726/html5-input-type-number-change-step-behavior — mplungjan, Jun 27 '19 at 07:56
@mplungjan Thanks! I was hoping for a simpler answer but looks like there is no other way ;) — Alireza A2F, Jun 27 '19 at 07:59

score 2 · Answer 1 · answered Jun 27 '19 at 08:19

One thought is you could remove the step attribute, disable the +/- slider buttons, and implement your own +/- buttons. Then, when a user clicks those buttons, a JavaScript function is called that retrieves the value in the input area, converts it to a number, and performs the desired step.

You might run into precision issues with using a step like 0.1. In the below snippet I just fixed the number of decimal places to two.

function stepUp(step) {
  let num = Number(document.getElementById('value').value);
  document.getElementById('value').value = (num + step).toFixed(2);
}

function stepDown(step) {
  let num = Number(document.getElementById('value').value);
  document.getElementById('value').value = (num - step).toFixed(2);
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

<button onclick="stepDown(0.1)">-</button>
<input id="value" type="number" value="0.00">
<button onclick="stepUp(0.1)">+</button>

connexo · Accepted Answer · 2019-06-27T09:11:25.793

I'd write a small customized built-in custom element doing just that:

class MyInput extends HTMLInputElement {
  constructor(step = 0.1, value = '') {
    super();
    this.type = 'number';
    this.step = this.getAttribute('step') || step;
    this.value = this.getAttribute('value') || value;
    this.addEventListener('input', (e) => {
      this.value = parseFloat(this.value) + 0.034;
    })
  }
}

customElements.define('my-input', MyInput, { extends: 'input' });

let input = new MyInput(0.1, 1);
document.body.appendChild(input);

<!-- if you want to use declaratively: -->
<input is="my-input" step="0.1" value="2" />
<hr />

This definitely needs some tweaking, e.g. if the user types in the input, but this should serve you well as a starting point.

score 1 · Answer 3 · edited Aug 07 '19 at 10:06

1

You can use novalidate and write your own validation in js for other form fields

<form novalidate>
    <input type="number" step="0.1" class="form-group" >
    <button>submit</button>
</form>

edited Aug 07 '19 at 10:06

soorapadman

4,451
7
35
47

answered Jun 27 '19 at 07:46

Kamil Kiełczewski

85,173
29
368
345

I also need other inputs to be validated so I can't use ```no validate```. – Alireza A2F Jun 27 '19 at 07:47

HTML input type=number step prevents form from submitting

3 Answers3