Hello friends, In this tutorial, we will learn how to validate a phone number using HTML, CSS, and JavaScript.
This is a process of checking whether the user’s entered phone number is a valid number or not. If the user enters the wrong phone number (i.e., if they enter more than or less than 10 digits, if they enter alphabets instead of numbers, if they enter other numbers as staring numbers except 6/7/8/9, and if they enter the submit button without filling out the mobile number), then the warning will be displayed to the user.
Why do we need it?
In our day-to-day lives, there is a need to check if the given number is valid or not in many cases.
To understand this implementation, read the below HTML, CSS, and JavaScript codes.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<title>Mobile Number Validation</title>
</head>
<body>
<div class=" background text-center pt-5 ">
<div class="container d-flex flex-row justify-content-center">
<div class="row">
<div class="col-12">
<h1 class="pb-5 text-primary">Welcome to CodeSpeedy Private Limited</h1>
<form onSubmit="return MobileNumberValidation()">
Mobile Number : <input type="text" id="number" value=""><br><br>
<span id="warning" class="text-danger"></span><br><br>
<input type="submit" value="submit">
</form>
</div>
</div>
</div>
</div>
</body>
</html>
<style>
.background{
background-color: #f1f815;
background-image: linear-gradient(90deg, #ebff14 0%, #0debff 100%);
height: 100vh;
}
</style>
<script>
function MobileNumberValidation(){
var MobileNumber= document.getElementById("number").value;
if(MobileNumber==""){
document.getElementById("warning").innerHTML="**Please Enter Mobile Number**";
return false;
}
if(isNaN(MobileNumber)){
document.getElementById("warning").innerHTML="**Only Numbers are Allowed**";
return false;
}
if(MobileNumber.length<9){
document.getElementById("warning").innerHTML="**Mobile Number Must be 10 Digits**";
return false;
}
if(MobileNumber.length>10){
document.getElementById("warning").innerHTML="**Mobile Number Must be 10 Digits**";
return false;
}
if((MobileNumber.charAt(0)!=9) && (MobileNumber.charAt(0)!=8) && (MobileNumber.charAt(0)!=7) && (MobileNumber.charAt(0)!=6)){
document.getElementById("warning").innerHTML="**Mobile Number Must Start With 6/7/8/9**";
return false;
}
}
</script>
OUTPUT:
