Write JavaScript code to check if a submitted value for phone number field is in a common format
Certainly! Here’s a simple example of JavaScript code that validates whether a submitted phone number is in a common 10-digit format:
<!DOCTYPE html>
<html>
<body>
<form id="validationCheck" name="validationCheck" method="post">
<label for="phoneNumber">Phone Number:</label>
<input type="tel" id="phoneNumber" name="phoneNumber" onchange="validatePhoneNumber()">
<button type="submit">Submit</button>
<div id="phoneValidationMsg"></div>
</form>
<script>
// Validate phone number
function validatePhoneNumber() {
// Get and trim phone number input
const phoneNumber = document.getElementById('phoneNumber').value.trim();
// Regex pattern for 10-digit phone number
const pattern = /^\d{10}$/;
// Validate phone number and update message
const isValid = pattern.test(phoneNumber);
document.getElementById('phoneValidationMsg').textContent = isValid
? ''
: 'Please enter a valid 10-digit phone number.';
// Return validation status
return isValid;
}
// Listener for when the DOM is fully loaded
document.addEventListener('DOMContentLoaded', function () {
// Event listener for form submission
document.getElementById('validationCheck').addEventListener('submit', function (event) {
// Validate phone number; prevent submission if invalid
if (!validatePhoneNumber()) {
event.preventDefault(); // Stops form submission for invalid number
}
});
});
</script>
</body>
</html>
This code sets up an HTML form with an input field for the phone number. When the user enters a value and submits the form, the JavaScript function validatePhoneNumber() checks if the input matches the 10-digit format. If not, it displays an error message.
.jpeg)
