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?

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?

• javascript
• html

• 2 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 Commented Jun 27, 2019 at 7:36
• 1 Why not step 0.001 if you want to allow 1.234 – mplungjan Commented Jun 27, 2019 at 7:38
• 1 I think maybe you need step="0.001"? – cloned Commented Jun 27, 2019 at 7:38
• 1 then you can't have values like 1.234 . you can have either one or the other, not both. – cloned Commented Jun 27, 2019 at 7:43
• 1 @AlirezaA2F You could pletely remove the step variable and add eventlisteners to manually manage the step – nick zoum Commented Jun 27, 2019 at 7:46

3 Answers 3

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.

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>

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>