Number validation in JavaScript

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:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
             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>

chevron_right


Output:
Case 1: Textfield contain alphabets

Case 2: Textfield contain alphabets and digits

Case 3: Textfield contain only digits

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.