Are you excited to explore phone number validation in JavaScript?
Ensuring phone numbers is important in every aspect.
In this article, we’ll explain how to validate phone numbers straightforwardly using JavaScript and HTML.
Read on to learn the simplest method to validate phone numbers in JavaScript using Regular Expressions.
Validating phone numbers using regex in JavaScript
There are several ways to validate phone numbers using JavaScript. One common method is to use a regular expression (regex) to check if the input matches a specific pattern.
Below is the JavaScript Regex code you’ll need to validate phone numbers.
/^(?(\d{3}))?[- ]?(\d{3})[- ]?(\d{4})$/ ✅Let’s break this down to help you understand it more easily:
/^(?The number can begin with an open parenthesis.
(\d{3})For the format to be valid, you need to type three numbers. If there’s no parenthesis, those numbers should be at the beginning.
)?You can add a closing parenthesis with it.
[- ]?The string can have a hyphen if you want. You can put it after the parenthesis or after the first three digits. For example, you can write it as (143)- or 143-.
(\d{3})After that, you need to have three more digits in the number. It can be like this: (123)-456, 123-456, or 123456.
[- ]?You can add a hyphen at the end if you want, like this: (123)-456-, -123-, or 123456-.
(\d{4})$/Lastly, the series should finish with four numbers.
How to validate a phone number in JavaScript?
As we mentioned earlier you can validate phone number using regex in JavaScript.
Here’s an example of a function that uses a regex to validate phone numbers in the format (123) 456-7890, (123)456-7890, 123-456-7890, or 1234567890:
function validatePhoneNumber(input_str) {
var re = /^\\(?(\d{3})\\)?[- ]?(\d{3})[- ]?(\d{4})$/;
return re.test(input_str);
}
You can also use HTML5 form validation to validate phone numbers.
Here’s an example of an HTML form that uses the pattern attribute to specify a regex for validating phone numbers:
<form>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" pattern="\\d{3}[ -]?\\d{3}[ -]?\\d{4}" required>
<input type="submit">
</form>
In our given example, the pattern attribute specifies a regex that checks for three digits, followed by an optional hyphen or space, three more digits, another optional hyphen or space, and finally four digits.
The required attribute specifies that the phone number field is required.
Here’s the complete example code:
<!DOCTYPE html>
<html>
<head>
<title>Phone Number Validation Form</title>
<h2>How to validate a phone number in JavaScript using Regex?</h2>
<script type="text/javascript">
function validatePhoneNumber() {
var phoneNumber = document.getElementById("phone").value;
var regex = /^\(?\d{3}\)?[- ]?\d{3}[- ]?\d{4}$/; ✅
if (regex.test(phoneNumber)) {
alert("The phone number is valid.");
} else {
alert("The phone number is not valid.");
}
}
</script>
</head>
<body>
<form onsubmit="event.preventDefault(); validatePhoneNumber();">
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" required>
<input type="submit">
</form>
</body>
</html>
As you can see, we used the regular expression ^(?\d{3})?[- ]?\d{3}[- ]?\d{4}$ checks for an optional opening parenthesis, followed by three digits, an optional closing parenthesis, an optional hyphen or space, three more digits, another optional hyphen or space, and finally four digits.
📌Please note that this code will only work if JavaScript is enabled in the user’s browser. Also, this is a very basic form and does not include any server-side processing or error handling.
Output:
Here’s another example code using the regular expression ^(09|+639)\d{9}$ checks for exactly 11 digits. The phone number should start with 09 or +639.
<!DOCTYPE html>
<html>
<head>
<title>Phone Number Validation Form</title>
<h2>How to validate a phone number in JavaScript using Regex?</h2>
<script type="text/javascript">
function validatePhoneNumber() {
var phoneNumber = document.getElementById("phone").value;
var regex = /^(09|\+639)\d{9}$/;✅
if (regex.test(phoneNumber)) {
alert("The phone number is valid.");
} else {
alert("The phone number is not valid.");
}
}
</script>
</head>
<body>
<form onsubmit="event.preventDefault(); validatePhoneNumber();">
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" required>
<input type="submit">
</form>
</body>
</html>Output:
Conclusion
In conclusion, this article has explored how to validate phone numbers in JavaScript using Regular Expressions (regex).
We’ve covered the essential regex patterns for validating various phone number formats, explained the code breakdown, and offered practical examples for implementing phone number validation in both JavaScript functions and HTML forms.
It’s important to remember that the code examples provided here are basic and serve as a starting point for implementing phone number validation in your web applications.
We hope this article has provided you with enough information to understand phone number validation in JavaScript and implement it effectively in your projects.
If you want to explore more JavaScript topics, check out the following articles:
Thank you for reading Itsourcecoders 😊.
