Phone Number Validation In jQuery
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Anjali
In this article we will show you the solution of phone number validation in jQuery, Phone numbers are a required field on registration forms these days.
How can you check whether the phone number you supplied is accurate, though?
Here, I'll demonstrate how to use jQuery to validate a phone number. Now let's talk about the jquery phone number validation concept.
Step By Step Guide On Phone Number Validation In jQuery :-
The biggest difficulty in validating phone numbers is navigating the various formats and foreign country codes. There are numerous forms that can be accepted as legitimate.
What is the best way to validate a phone number using the jQuery Input Mask Plugin?
An input mask seems to be a string expression which shows the format of an acceptable user input value, or we could say that it restricts user input.
When filling out forms with inputs that need to be validated, this is really helpful. This post will show you how to use jQuery to provide an input mask to a phone number input element to validate it.
There are two possible strategies to use in this situation:
Strategy 1 :-
For example, in which makes usage of a jQuery inputmask plugin, defines three input fields with the classes first-phone, second-phone, and third-phone, accordingly.
By utilising a jQuery class selector [$("class-name")], we choose these components.
After which each input element should be subjected to the inputmask() method of the inputmask plugin.
The supplied string expression is passed as a parameter to the inputmask() method in order to restrict user input.
In this instance, we configured three alternative phone number formats for such three input fields.
CDN Link :-
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.7/jquery.inputmask.min.js”></script>
To utilize the jQuery inputmask plugin and so therefore implement all of its functions, this link must be present on the index page.
Syntax :-
$(document).ready(function(){
$(selector).inputmask("99-9999999");
$(selector).inputmask({"mask": "(999)-999-9999"});
});
Strategy 2 :-
By using jQuery maskedinput plugin is method number two. The example defines four input fields with the classes first-phone, second-phone, third-phone, and fourth-phone, respectively.
jQuery's [$("class-name")] class selector is used to choose these items. and after that provide each input element a mask() application from the maskedinput plugin.
The supplied string expression is passed as an argument to the mask() method, which will then restrict user input to that string.
In this instance, we've set four alternative phone number formats for such four input fields.
CDN Link :-
<script src= “https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js”> </script>
It should be noted that in order to utilize the jQuery maskedinput plugin and therefore implement all of its features, this link must be present on the index page.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js">
</script>
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 40px;
}
p {
font-size: 30px;
font-weight: bold;
}
div:not(:last-child) {
margin-bottom: 2rem;
}
</style>
</head>
<body>
<h1>Talkerscode</h1>
<p>Phone number validation in jquery..</p>
<form>
<div>
<label>Phone Number 1:</label>
<input type="text" name="phone"
class="first-phone"
placeholder="(99)-9999-9999" />
</div>
<div>
<label>Phone Number 2:</label>
<input type="text" name="phone"
class="second-phone"
placeholder="+99-9999999999" />
</div>
<div>
<label>Phone Number 3:</label>
<input type="text" name="phone"
class="third-phone"
placeholder="(999)-999-9999" />
</div>
<div>
<label>Phone Number 4:</label>
<input type="text" name="phone"
class="fourth-phone"
placeholder="+999-99-99-999999" />
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
$(".first-phone").mask("(99)-9999-9999");
$(".second-phone").mask("+99-9999999999");
$(".third-phone").mask("(999)-999-9999");
$(".fourth-phone").mask("+999-99-99-999999");
});
</script>
</body>
</html>
- With the aid of HTML & HEAD tags, we begin our coding.
- After that, we use script to import the JQuery library.
- Next, the necessary jQuery maskedinput plugin is imported.
- Next, we employ fundamental inline style with the aid of CSS.
- Next, we begin the body, which includes a few texts and a heading.
- Following that, we begin the form where we use the div class to construct labels for phone numbers.
- Next, we submit our form and launch the script.
- In the script, we first execute the jQuery code using the ready() method.
- After that, we employ the masking technique.
- Finally, we add SCRIPT, BODY, and HTML tags to our code.
Conclusion :-
Consequently, we were able to understand the jQuery idea of phone number validation.
Additionally, we acquired understanding of the inputmask plugin as well as the maskedinput plugin through example.
I hope this article on phone number validation in jQuery helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
