Number validation in JavaScript

Difficulty Level : Hard
Last Updated : 14 Aug, 2020

Sometimes the data entered into a text field needs to be in the right format and must be of a particular type in order to effectively use the form. For instance, Phone number, Roll number, etc are some details that are must be in digits not in alphabets.

Approach:

We have used isNaN() function for validation of the textfield for numeric value only. Text-field data is passed in the function and if passed data is number then isNan() returns true and if data is not number or combination of both number and alphabets then it returns false.

Below is a code in HTML and JavaScript to validate a text field if it contains digit or not.

Example:

<!DOCTYPE html>
<html>
    <head>
        <script>
            /* this function is called when we
            click on the submit button*/
            function numberValidation() {
                /*get the value of the textfield using a 
                combination of name and id*/
                //form is the name of the form coded below
                //numbers are the name of the inputfield
                /*value is used to fetch the value written 
                in that particular field*/
                var n = document.form.numbers.value;
  
/* isNan() function check whether passed variable 
   is number or not*/
                if (isNaN(n)) {
/*numberText is the ID of span that print "Please enter 
Numeric value" if the value of inputfield is not a number*/
                    document.getElementById(
                      "numberText").innerHTML =
                      "Please enter Numeric value";
                    return false;
                } else {
                    /*numberText is the ID of span that print 
      "Numeric value" if the value of inputfield is a number*/
                    document.getElementById(
                      "numberText").innerHTML = 
                      "Numeric value is: " + n;
                    return true;
                }
            }
        </script>
    </head>
  
    <body>
        <!-- GeeksforGeeks image logo-->
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png" 
             alt="Avatar" 
             style="width: 200px;" />
  
        <!-- making the form with form tag than
             conatins inputField and a button -->
        <!-- onsubmit calls the numberValidation
             function which is created above -->
        <form name="form"
              onsubmit="return numberValidation()">
            <!-- name of input type is numbers 
       and create of id of span as numberText-->
            <!-- Respective output of input 
         is printed in span field -->
            Number: <input type="text"
                           name="numbers" />
          <span id="numberText"></span>
          <br />
            <input type="submit"
                   value="submit" />
        </form>
    </body>
</html>

Output:
Case 1: Textfield contain alphabets

Case 2: Textfield contain alphabets and digits

Case 3: Textfield contain only digits

My Personal Notes

Related Articles