You are currently viewing 10 Digit Phone Number Validation In JavaScript

10 Digit Phone Number Validation In JavaScript

10 Digit Phone Number Validation In JavaScript

 

10 Digit Phone Number Validation In JavaScript
10 Digit Phone Number Validation In JavaScript

 

 
Welcome🎉 to The CodeWithRandom blog. In this blog, we learn how to create a 10 Digit Phone Number Validation In JavaScript. We use HTML, Css, and JavaScript for 10 Digit Phone Number Validation.
I hope you enjoy our blog so let’s start with a basic HTML structure for the 10 Digit Phone Number Validation.

 

HTML Code For Number Validation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Phone number validation</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
</head>
<body>
  <div>
  <form>
    <h1 class="text-center">
    Phone number validation with simple Javascript
    </h1>
    <div class="input-group">
    <input id="mobile" type="text" class="form-control" placeholder="Enter the phone number to check..." />
    <div class="input-group-btn">
    <button class="btn btn-primary checkmobile" type="button">
    Check
    </button>
    </div>
    </div>
    </form>
    </div>
  <script src="app.js"></script>
  </body>
</html>

There is all the HTML Code for the 10 Digit Phone Number Validation. Now, you can see output without Css and Javascript. Then we write Css And Javascript for 10 Digit Phone Number Validation.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Only HTML Code Output

10 Digit Phone Number Validation In JavaScript
10 Digit Phone Number Validation In JavaScript

Code For Number Validation

body {
  border-top: 2px solid #007bff;
  background: #efefef;
  }
  .container {
  margin-top: 0.5rem;
  }
  .container h1 {
  color: #007bff;
  }
  .container .input-group input {
  border-color: #007bff;
  border-width: 3px;
  border-radius: 25px 0 0 25px !important;
  }
  .container .input-group .input-group-btn button {
  border-radius: 0 25px 25px 0 !important;
  }

Html and Css Updated output For 10 Digit Phone Number Validation.

10 Digit Phone Number Validation In JavaScript
10 Digit Phone Number Validation In JavaScript

JavaScript Code For 10 Digit Phone Number Validation

 $(document).ready(function() {
$('body').on('click','.checkmobile', function() {
var tdr_regex = /((09|03|07|08|05)+([0-9]{8})b)/g; // Do not use +
var mobile = $('#mobile').val();
if(mobile !==''){
if (tdr_regex.test(mobile) == false)
{
alert( 'Your phone number ' + mobile + ' is not in the correct format!');
}else{
alert( 'Your phone number ' + mobile + ' is valid!');
}
}else{
alert( 'You have not entered your phone number!');
}
});
});

Final Output Of 10 Digit Phone Number Validation

10 Digit Phone Number Validation In JavaScript
10 Digit Phone Number Validation In JavaScript

 

10 Digit Phone Number Validation In JavaScript
10 Digit Phone Number Validation In JavaScript

 

Now that we have completed our 10 Digit Phone Number Validation In JavaScript. Here is our updated output with Html, Css, And Javascript Code.

10+ Javascript Projects For Beginners With Source Code

Hope you like the 10 Digit Phone Number Validation Using Javascript. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you!

Written by – Code With Random/Anki
Code by – Tuan Duc Design

Leave a Reply