How to implement verification of number of fields in the form
Sometimes the data entered in a text field must be in the correct format and of a special type to use the form effectively. For example, phone number, roll number etc are some of the details which should be in numbers and not in letters.
We have used isNaN() function for validation of textfield for numeric value only. Text-field data is passed to the function and isNan() returns true if the data passed is a number and false if the data is not a number or a combination of both numbers and letters.
Below is a code in HTML and JavaScript to validate a text field if it contains digits or not.
Example:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
How to Apply Validation in Number
</title>
<style type="text/css">
div{
margin: 50px auto;
text-align: center;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5);
}
div form input{
padding: 10px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<script>
function myfun() {
var myprograming = document.getElementById("mobilenumber").value;
if (myprograming=="") {
document.getElementById("messages").innerHTML="**Please Feel Mobile Number";
return false;
}
if (isNaN(myprograming)) {
document.getElementById("messages").innerHTML="**Enter Only Number";
return false;
}
if(myprograming.length<10){
document.getElementById("messages").innerHTML="**Mobile Number Must Be 10 Digit";
return false;
}
if(myprograming.length>10){
document.getElementById("messages").innerHTML="**Mobile Number Must Be 10 Digit";
return false;
}
if ((myprograming.charAt(0)!=9) && (myprograming.charAt(0)!=8) && (myprograming.charAt(0)!=7) && (myprograming.charAt(0)!=6)) {
document.getElementById("messages").innerHTML="**Mobile Number Must Be Start 9 , 8, 7, 6";
return false;
}
}
</script>
<div>
<h1>How to Apply Validation in Number</h1>
<form onsubmit="return myfun()">
Mobile Number:- <br>
<input type="test" name="mobile" id="mobilenumber" value="">
<span id="messages"></span> <br>
<input type="Submit" name="" value="Submit">
</form>
</div>
</body>
</html>Output:-
