Write JavaScript code to check if a submitted value for phone number field is in a common format.
Ensuring that phone numbers are submitted in a common format is a crucial aspect of web development. It helps in maintaining data consistency and improves the user experience. In this article, we will discuss how to write JavaScript code to validate phone numbers and ensure they adhere to common formats.
Table of Contents
ToggleCommon Phone Number Formats
Phone numbers can be written in various formats depending on the country and the user’s preference. Some of the common formats include:
- International format:
+1-234-567-8901 - Dashes:
123-456-7890 - Parentheses and spaces:
(123) 456-7890 - Dots:
123.456.7890 - Plain digits:
1234567890
Our goal is to write JavaScript code that can recognize and validate these formats.
Setting Up the HTML Form
First, we need to set up an HTML form with an input field for the phone number and a submit button. Here is a simple example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Phone Number Validation</title>
</head>
<body>
<form id=”phoneForm”>
<label for=”phoneNumber”>Phone Number:</label>
<input type=”text” id=”phoneNumber” name=”phoneNumber” required>
<button type=”submit”>Submit</button>
</form>
<p id=”result”></p><script src=”validation.js”></script>
</body>
</html>
Writing the Validation JavaScript Code
Now, let’s write the JavaScript code to validate the phone number format. We’ll use regular expressions (regex) to check if the input matches the common phone number formats.
Create a file named validation.js and add the following code:
document.getElementById(‘phoneForm’).addEventListener(‘submit’, function(event) {
event.preventDefault(); // Prevent form from submittingconst phoneNumber = document.getElementById(‘phoneNumber’).value;
const result = document.getElementById(‘result’);// Define regex patterns for common phone number formats
const patterns = [
/^\+?[1-9]\d{1,14}$/, // International format
/^\(?([0-9]{3})\)?[-.●]?([0-9]{3})[-.●]?([0-9]{4})$/, // (123) 456-7890, 123-456-7890, 123.456.7890
/^[0-9]{10}$/ // Plain digits
];// Check if the phone number matches any of the patterns
const isValid = patterns.some(pattern => pattern.test(phoneNumber));if (isValid) {
result.textContent = “Valid phone number!”;
result.style.color = “green”;
} else {
result.textContent = “Invalid phone number. Please enter a valid format.”;
result.style.color = “red”;
}
});
Explanation of the JavaScript Code
- Event Listener: We add an event listener to the form to intercept the submit event and prevent the default form submission.
- Phone Number Retrieval: We get the value of the phone number input field.
- Regex Patterns: We define an array of regex patterns that match common phone number formats.
- Validation: We use the
somemethod to check if the phone number matches any of the defined patterns. - Result Display: Depending on whether the phone number is valid or not, we update the text content and color of the result paragraph.
Testing the Validation
To test the validation, open the HTML file in a web browser. Enter different phone numbers in various formats to see if the validation works as expected. Try inputs like +1-234-567-8901, (123) 456-7890, 123-456-7890, 123.456.7890, and 1234567890 to ensure they are recognized as valid. Also, test some invalid formats to ensure they are correctly identified as invalid.
Validating phone numbers using JavaScript ensures that user input adheres to expected formats, enhancing data consistency and user experience. By leveraging regular expressions, we can efficiently check for various common phone number formats. This approach can be extended to include additional formats or customized to fit specific requirements.
