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