There are many situations to allow entering just numbers or alphabets, or both are acceptable in the form’s fields, depending on the requirements. For this purpose, validate the fields according to the requirement using JavaScript validation. It ensures that the user’s input is correct, complete, and according to need or not before submitting it to the server.
This post will define the approaches to validate the form’s fields to enter only numbers.
JavaScript Validation to Enter Numbers Only
To validate fields to enter only numbers, use the below-mentioned approaches:
Method 1: Validation Numbers Only Using a Regular Expression
Use the “regular expression” or a “regex pattern” to validate the fields of the form to enter only the numbers. To check the user’s input, use the “match()” method with the regex that matches input with the provided regex pattern.
Example
In the HTML file, use the following code to create a form:
Enter your Pin Number: <input type="text" id="pinNumber"
autocomplete="off">
<p id="error"></p>
<input type="submit" value="submit" onclick="numberValidationFunc()">
</form>
According to the above code snippet:
- First, create a form containing an input field that only accepts the number as a “Pin Number”.
- Then, create a space for a printing message if the input is incorrect or correct using the <p> tag.
- Create a “submit” button that calls the “numberValidationFunc()” on the button click to verify the form’s fields.
Use the following code in the “<script>” tag or JavaScript file:
{
var input = document.getElementById("pinNumber").value;
var pattern = /^[0-9]+$/;
if(input.match(pattern))
{
document.getElementById("error").innerHTML ="Great";
return true;
}
else
{
document.getElementById("error").innerHTML ="Enter Numeric value";
return false;
}
}
Here, in the above snippet:
- First, define a function named “numberValidationFunc()” that will be invoked on the button click.
- Get the input value using the “value” attribute.
- Create a regex pattern stored in a variable “pattern”.
- Then, verify whether the input matches the pattern using the “match()” method.
- If the input matches the pattern, print the message “Great”, else, display the error message “Enter Numeric value”.
As you can see, the output only accepts the numbers while entering numbers with alphabets is not acceptable, and it shows an error message:
Method 2: Validation Numbers Only Using isNaN() Method
You can also use the “isNaN()” method for validating fields to enter only the numbers. It takes input as an argument and checks if the input is a number it gives “true” else, it gives “false”.
Example
Define a function “numberValidationFunc()” that will call on the onclick event of the submit button to verify whether the input is a number or not using the “isNaN()” method:
{
var input = document.getElementById("pinNumber").value;
if(isNaN(input))
{
document.getElementById("error").innerHTML ="Enter Numeric value";
return false;
}
else
{
document.getElementById("error").innerHTML ="Great";
return true;
}
}
Output
That’s all about validation of numbers only in JavaScript.
Conclusion
To validate the form’s text fields for only numeric values, use the “regular expression” as regex patterns or the “isNaN()” method. Both approaches are best for validating only numbers, and you can choose/pick any one according to your desire. This post defined the approaches to validate the form’s fields to enter only numbers.
