Disable input validation for input type=number

Question

I have a numeric input tag in a form element:

<form novalidate="">
      <input type="number" data-role="none" autocapitalize="off" autocorrect="off" autocomplete="off" placeholder="Quantity" class="quantityInput" />
</form>

When user types in any non-numeric value, the browser validates it and removes the whole text before submit call.

From the suggestions of other answers I tried using novalidate and novalidate="novalidate" attributes on the form. I also tried to tap invalid events. But nothing seems to work. The browser just removes the whole text if it is non-numeric before doing the submit call.

The reason to use input type="number" is that I need a quantity field in which user types something like 10 grams or 23 pcs etc. So by setting the input type="number", iOS shows the numeric version of the keyboard first.

How do I disable browser validation for input types of number?

possible duplicate of Disable validation of HTML5 form elements — Abdul Jabbar
If you want both numerical and textual values, you will have to use text type instead. The number type will only accept numerical value.(literally) — Xlander
can you share your input box code so all understand what's wrong? — Vinit Patel

idmadj idmadj · Accepted Answer · 2020-11-10T07:30:22

The modern answer (as of 2020) is to use inputmode:

    <input type="text" inputmode="email">
    <input type="text" inputmode="tel">

Disable input validation for input type=number

1 Answers