Validate a numeric input without blocking typing

Validate the value, not the key

A keypress filter misses paste and other input methods, and can interfere with editing shortcuts. Let people enter their value, then explain what needs correcting. The demo validates locally; it does not send or save the input.

First decide what “numeric” means. A quantity, decimal amount and reference number have different rules. This example accepts a non-negative decimal using a full stop, with up to two decimal places. It deliberately rejects commas, exponents and negative values.

Markup and validation

<label for="amount">Amount</label>
<input id="amount" name="amount" type="text" inputmode="decimal"
  maxlength="20" aria-describedby="amount-help amount-message">
<p id="amount-help">Use a full stop and up to two decimal places, for example 12.50.</p>
<button type="button" id="check-amount">Check amount</button>
<p id="amount-message" role="status"></p>

function isDecimalAmount(value) {
  return /^\d{1,12}(?:\.\d{1,2})?$/.test(value.trim());
}

const input = document.querySelector('#amount');
const message = document.querySelector('#amount-message');

document.querySelector('#check-amount').addEventListener('click', () => {
  const valid = isDecimalAmount(input.value);
  input.setAttribute('aria-invalid', String(!valid));
  message.textContent = valid
    ? 'That amount has a valid format.'
    : 'Enter a non-negative number with up to two decimal places, such as 12.50.';
});

input.addEventListener('input', () => {
  input.removeAttribute('aria-invalid');
  message.textContent = '';
});

Put the JavaScript in a deferred file. Invalid text stays in the field so it can be corrected. The mobile keyboard hint does not enforce validity, and different devices can still present different keys.

Choose the right field type

For a countable quantity, a native number input may be enough:

<label for="quantity">Quantity</label>
<input id="quantity" name="quantity" type="number" min="1" max="100" step="1" required>

Do not use numeric conversion for phone numbers, postcodes or identifiers where leading zeroes matter. For money, validate and convert to the payment system's integer minor units on the server; do not treat a JavaScript floating-point value as authoritative. Client-side checks improve feedback, but the receiving server must independently validate the submitted value and business limits.

References: number inputs and inputmode.

$(function(){
  $('.number_only').keypress(function(event) {
    if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
      event.preventDefault();
    }
  });
})