SOP 2 : Create JavaScript program for the following form validations. Make use of HTML5 properties to do the following validations :
- Name, address, contact number and email are required fields of the form.
- Address field should show the hint value which will disappear when field gets focus or key press event.
- Telephone number should be maximum 10 digit number only.
- Email field should contain valid email address, @ should appear only once and not at the beginning or at end. It must contain at least one dot(.).
- Make use of pattern attribute for email to accept lowercase, uppercase alphabets, digits and specified symbols.
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<style>
.error {
color: red;
font-size: 0.9em;
}
</style>
</head>
<body>
<h1>Information Form</h1>
<form name="myForm" onsubmit="return validateForm()">
<!-- Name Field -->
<label for="txt_name">Your Name:</label>
<input type="text" id="txt_name" name="txt_name" required>
<span class="error" id="nameError"></span>
<br><br>
<!-- Address Field -->
<label for="txt_address">Address:</label>
<textarea id="txt_address" name="txt_address" placeholder="Permanent Address" onfocus="clearPlaceholder(this)" onkeypress="clearPlaceholder(this)" required></textarea>
<span class="error" id="addressError"></span>
<br><br>
<!-- Contact Number Field -->
<label for="telephone">Contact:</label>
<input type="tel" id="telephone" name="telephone" maxlength="10" pattern="\d{10}" required>
<span class="error" id="contactError"></span>
<br><br>
<!-- Email Field -->
<label for="txt_email">Email:</label>
<input type="email" id="txt_email" name="txt_email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}" required>
<span class="error" id="emailError"></span>
<br><br>
<!-- Submit Button -->
<input type="submit" value="Submit">
</form>
<script>
// Function to clear the placeholder on focus or keypress
function clearPlaceholder(textarea) {
if (textarea.value === textarea.placeholder) {
textarea.value = "";
}
}
// Function to validate the form
function validateForm() {
let isValid = true;
// Validate Name
const nameInput = document.getElementById("txt_name");
const nameError = document.getElementById("nameError");
if (nameInput.value.trim() === "") {
nameError.textContent = "Name must be filled out.";
isValid = false;
} else {
nameError.textContent = "";
}
// Validate Address
const addressInput = document.getElementById("txt_address");
const addressError = document.getElementById("addressError");
if (addressInput.value.trim() === "") {
addressError.textContent = "Address must be filled out.";
isValid = false;
} else {
addressError.textContent = "";
}
// Validate Contact Number
const contactInput = document.getElementById("telephone");
const contactError = document.getElementById("contactError");
if (!/^\d{10}$/.test(contactInput.value)) {
contactError.textContent = "Contact number must be a 10-digit number.";
isValid = false;
} else {
contactError.textContent = "";
}
// Validate Email
const emailInput = document.getElementById("txt_email");
const emailError = document.getElementById("emailError");
const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (!emailPattern.test(emailInput.value)) {
emailError.textContent = "Please enter a valid email address.";
isValid = false;
} else {
emailError.textContent = "";
}
return isValid;
}
</script>
</body>
</html>
