How to Validate Numbers in Form Inputs in JavaScript

1. Use RegExp.prototype.test() to Validate a Number in JavaScript
2. Use isNaN to Validate a Number in JavaScript

This article will teach you how to validate numbers on HTML form inputs. We’ll take two approaches.

The first will use RegExp.prototype.test() method and the second will use two variations utilizing the JavaScript isNaN() function.

Use RegExp.prototype.test() to Validate a Number in JavaScript

You can validate a number using RegExp.prototype.test() method. Since the test() method is from the RegExp.prototype, you’ll have to call it on a valid Regular Expression pattern before validating a number.

This means you need to have a pattern to validate a number before the test() method does any validation.

In our code example, we define a Regular Expression pattern that will match a number. Afterward, we call the test() method on a variable to check if it’s a number.

Meanwhile, this approach will not accept decimals.

<main style="font-size: 2em">
    <form>
        <label for="number">Enter a number</label>
        <input id="number" type="text" name="number"/>
        <input type="submit" value="submit" id="submit">
    </form>
</main>
<script>
    let formInput = document.getElementById("number");
    let submit = document.getElementById('submit');

    submit.addEventListener("click", function(e) {
        e.preventDefault();
        let formValue = formInput.value;
        if (!/\D/.test(formValue)) {
            alert("You submitted numbers");
        } else {
            alert("You did not submit numbers");
        }
    });
</script>

Output:

Use isNaN to Validate a Number in JavaScript

JavaScript isNaN function checks if it is a number or not. So, if it’s used in an if conditional check and returns false, the variable we checked is a number.

There are different ways you can use isNaN to check if the variable is a number. The following are examples.

1. Validate a number with isNaN and String.fromCharCode.
2. Validate a number with isNaN and parseFloat and isFinite.

Use isNaN and String.fromCharCode to Validate a Number in JavaScript

You can use a combination of the String.fromCharCode and this.value on the key that the user presses. To track the keys the user press on their keyboard, you’ll use the onkeypress event attribute.

Meanwhile, String.fromCharcode will take the event.keycode as an argument. Afterward, you add this.value and String.fromCharCode(argument).

Therefore, you can use the isNaN() function on the addition result. So, an if statement on the isNaN that returns false means the user pressed a number on their keyboard.

Meanwhile, this approach will also accept decimals.

<main style="font-size: 2em">
    <form>
        <label for="number">Enter a number</label>
        <input id="number" type="text" name="number">
    </form>
</main>
<script>
    let formInput = document.getElementById("number");
    formInput.addEventListener("keypress", function() {
        if (isNaN(this.value + String.fromCharCode(event.keyCode))) {
            alert("That was not a number!");
            return false;
        }
    });
</script>

Output:

However, if you don’t want decimals, you can use the isNaN function on String.fromCharCode(event.keyCode).

<main style="font-size: 2em;">
    <form>
        <label for="number">Enter a number</label>
        <input id="number" type="text" name="number">
    </form>
</main>
<script>
    let formInput = document.getElementById("number");
    formInput.addEventListener("keypress", function() {
        if (isNaN(String.fromCharCode(event.keyCode))) {
            alert("That was not a number!");
            return false;
        }
    });
</script>

Output:

Use isNaN and parseFloat and isFinite to Validate a Number in JavaScript

The parseFloat function will parse a number and returns a floating-point number. In contrast, the isFinite function determines if a number is a number.

So, if an argument passes as a floating point and a finite number, it’s a number. At the same time, if you use the isNaN function on such an argument, it should return false because it’s a number.

Therefore, in an if statement, you can negate the result of the isNaN function. This ensures the if statement matches a number.

As a result, the code in the else block will match an argument that is not a number.

We’ve implemented the check with the isNaN as a function in the code below. After that, we use the function in an if statement.

<main style="font-size: 2em">
    <form>
        <label for="number">Enter a number</label>
        <input id="number" type="text" name="number"/>
        <input type="submit" value="submit" id="submit">
    </form>
</main>
<script>
    function validateNumber(number) {
        return !isNaN(parseFloat(number) && isFinite(number));
    }

    let formInput = document.getElementById("number");
    let submit = document.getElementById('submit');

    submit.addEventListener("click", function(e) {
        e.preventDefault();
        if (validateNumber(formInput.value)) {
            alert("You entered numbers!");
        } else {
            alert("You did not submit numbers!");
        }
    });
</script>

Output: