Scribd
Upload
4 views3 pages

script

The document is an HTML contact form that includes fields for a phone number and name, with validation for the phone number to ensure it is exactly 11 digits. It features error messages for invalid input and an alert for successful submission. The form uses basic CSS for styling and JavaScript for validation functionality.

Uploaded by

gelliajoyp
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views3 pages

script

The document is an HTML contact form that includes fields for a phone number and name, with validation for the phone number to ensure it is exactly 11 digits. It features error messages for invalid input and an alert for successful submission. The form uses basic CSS for styling and JavaScript for validation functionality.

Uploaded by

gelliajoyp
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Contact Form</title>

<style>

.form-group {

margin-bottom: 10px;

.error-message {

color: red;

font-style: italic;

</style>

</head>

<body>

<div id="contact-form">

<div class="form-group">

<label for="phone_number">Phone Number (11 digits):</label><br>

<input type="tel" id="phone_number" name="phone_number" maxlength="11" required><br>

<span class="error-message" id="phone-error"></span>

</div>

<div class="form-group">

<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br>

</div>

<button onclick="validateForm()">Submit</button>

</div>

<script>

function validateForm() {

var phoneNumber = document.getElementById('phone_number').value;

var name = document.getElementById('name').value;

var phoneError = document.getElementById('phone-error');

// Validate phone number format (exactly 11 digits)

if (!phoneNumber.match(/^\d{11}$/)) {

phoneError.textContent = "Invalid phone number format. Please enter exactly 11 digits.";

return false;

} else {

phoneError.textContent = "";

// Optionally, you can perform additional client-side validation here

// If all validation passes, you can submit the form or further process data

// Here, we're just alerting for demonstration purposes

alert("Form submitted successfully!");

}
</script>

</body>

</html>

You might also like