Number validation in JavaScript - GeeksforGeeks

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 digitsCase 3: Textfield contain only digits
JavaScript-Numbers
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to Open URL in New Tab using JavaScript ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?