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?

Answer 1

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

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