10 Digit Phone Number Validation Javascript(jquery) | Phone number validation Html Css jquery







10 Digit Phone Number Validation Javascript(jquery) | Phone number validation Html Css jquery


Welcome🎉 to Code With Random blog. In this blog, we learn how we create a 10 Digit Phone Number Validation Javascript(jquery). We use HTML, Css, and javascript for 10 Digit Phone Number Validation Javascript(jquery) I hope you enjoy our blog so let’s start with a basic HTML structure for the 10 Digit Phone Number Validation Javascript(jquery).

HTML Code

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
 <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>

There is all the HTML code for the 10 Digit Phone Number Validation Javascript(jquery). Now, you can see an output with 10 Digit Phone Number Validation Javascript(jquery) then we write javascript for 10 Digit Phone Number Validation Javascript(jquery)

output

10 Digit Phone Number Validation Javascript(jquery) | Phone number validation Html Css jquery

CSS code

 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;
}

Css Updated output

10 Digit Phone Number Validation Javascript(jquery) | Phone number validation Html Css jquery

Javascript(jquery)  code

    <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> $(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

10 Digit Phone Number Validation Javascript(jquery) | Phone number validation Html Css jquery

10 Digit Phone Number Validation Javascript(jquery) | Phone number validation Html Css jquery

Now that we have completed our javascript section,  Here is our updated output with javascriptHope you like the 10 Digit Phone Number Validation Javascript(jquery) . you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create a 10 Digit Phone Number Validation Javascript(jquery)  using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by – Code With Random/Anki 

Code by – Tuan Duc Design

Share on:

Leave a Comment