Change the Increment Value of HTML Number Input without changing valid values

Question

I have an input form which looks like this:

<input type="number" value="0.00" step="0.05">

I found the step function which technically solves my increment problem changing it to 0.05 instead of the default 1. I have however not found a solution where I can change the increment without changing the valid inputs.

The input can take any number but the most common values will be in increments of 0.05. Is there a work-around for this? A solution using JavaScript is also more than welcome.

Thank you very much!

EDIT: Adding nonvalidateto the html form-tag solved this for me. Now pressing the buttons use the increments I want but when I need to specify more accurately than the steps the form still accepts the values.

<form action="/run" novalidate>
  <input type="number" value="0.00" step="0.05">
  <input type="submit">
</form>

Answer 1

Using novalidate in the form tag will get rid of the validation for the whole form but keep the increments implemented by step.

Answer 2

Update

"I did add nonvalidate to the form tag. It let's me do what I want as of now but it might not be the best solution."

If you don't want your form "compromised" by novalidate, then have 2 forms:

• Form A [No action or method]

  • All user interaction and calculations are here.
  • All inputs can be modified without worrying about built-in validation from the form.

• Form B [Set action and method optional target]

  • The submit button resides within
  • Add a hidden input for each value on Form A you want to submit and ensure each has a name attribute and value.
  • Any client-side validation should be done here.

With that setup you'll need an event like onbeforesubmit so the values of Form A can transfer over to Form B before it submits to the server. Unfortunately I don't think it exist as a standard, but to emulate it is simple:

 formA.onsubmit = b4Submit;

 function b4Submit(event) {

   hidden_Input_In_FormA.value = number_Input_With_Crazy_Step_In_FormA.value

   return true;
 }

So this contrived example shows an event handler that gets the value from one form then stores it in the other form. Next it continues by submitting whatever data it has. This is due to the callback returning true, should false be returned, the callback function itself dies and so does the submit event along with it.

The Demo has been updated to do what was just described above. Note: there are no novalidate attributes in use. The second form (Form B or form#tx) is sending text from a hidden input as far as it's concerned. A number like -103.002684109 is not valid if it's from an <input type='number'> but from a text or hidden input, it is just text (although I believe the actual data in most form controls is actually a string not a number).

---

"The input can take any number but the most common values will be in increments of 0.05. Is there a work-around for this? A solution using JavaScript is also more than welcome."

You can change any attribute you want on any tag AFAIK. Programatically the syntax is simple with Plain JavaScript:

 Object.property = "string"

Object: a referenced <element> tag

property: when you reference an standard attribute like a property it's becomes a property.

string: the value must be a string

Here's a basic way of changing a standard attribute programmatically:

<a href="https://stackoverflow.com"></a>
var obj = document.querySelector('a');
obj.href = "https://google.com"; // <a href="https://google.com"></a>

The following Demo uses:

• Document.Forms
• HTMLFormElement.elements
• HTMLFormControlsCollection
• Dot Notation

---

Demo

Demo can send to a live test server the response is sent to an iframe to view

var ui = document.forms.ui;
var tx = document.forms.tx;
var u = ui.elements;
var x = tx.elements;
var D = u.digit;
var C = x.cache;
var lo = u.min;
var hi = u.max;
var inc = u.step; // I think this what you specificly
var t = u.type;
var chg = u.change;

chg.onclick = chgAttr;
tx.onsubmit = cacheVal;

function chgAttr(e) {
  D.min = lo.value;
  D.max = hi.value;
  D.step = inc.value;
  D.type = t.value;
}

function cacheVal(e) {
  C.value = D.value;
  return true;
}

body {
  font: 400 16px/1.5 'Consolas'
}

#digit {
  margin-right: 15px;
}

input,
output,
button,
select,
option,
label {
  display: inline-block;
  font: inherit
}

select {
  padding: 3px 5px
}

[type='submit'] {
  float: right;
}

<!doctype html>
<html>

<head>
  <title></title>
  <meta charset='utf-8'>
  <style></style>
</head>

<body>
  <form id='ui' oninput='out.value = digit.value'>

    <fieldset>
      <legend>Click Button to Change Input</legend>
      <input id='digit' min='' max='' step='' type='number'>
      <button id='change' type='button'>CHANGE</button>
      <output id='out' for='digit'></output>
    </fieldset>

    <fieldset>
      <legend>Attribute Adjustments</legend>
      <input id='min' min='-2147483648' max='2147483648' type='number' placeholder='min'>
      <input id='max' min='-2147483648' max='2147483648' type='number' placeholder='max'>
      <input id='step' type='number' placeholder='step'>

      <label for='type'>Type: 
    <select id='type'>
      <option>number</option>
      <option>text</option>
      <option>range</option>
      <option>hidden</option>
      <option>color</option>
      <option>time</option>
    </select>
    </label>

    </fieldset>

  </form>
  <form id='tx' action='https://httpbin.org/post' method='post' target='response'>
    <input id='cache' name='cache' type='hidden'>
    <input type='submit'>
  </form>
  <iframe src='about:blank' name='response'></iframe>

  <script></script>
</body>

</html>