write this on the writing side
- 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>
</head>
<body>
<h1>Information Form</h1>
<form name="myForm" onsubmit="return validateForm()">
<label for="txt_name">Your Name</label>
<input type="text" id="txt_name" name="txt_name" required>
<br><br>
<label for="txt_address">Address</label>
<textarea id="txt_address" name="txt_address" placeholder="Permanent Address" onfocus="this.placeholder=''" onkeypress="this.placeholder=''" required></textarea>
<br><br>
<label for="telephone">Contact</label>
<input type="tel" id="telephone" name="telephone" maxlength="10" required>
<br><br>
<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,4}" required>
<br><br>
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
// Validate name, address, contact, and email fields
var name = document.forms["myForm"]["txt_name"].value;
var address = document.forms["myForm"]["txt_address"].value;
var contact = document.forms["myForm"]["telephone"].value;
var email = document.forms["myForm"]["txt_email"].value;
if (name == "") {
alert("Name must be filled out");
return false;
}
if (address == "") {
alert("Address must be filled out");
return false;
}
if (contact == "") {
alert("Contact number must be filled out");
return false;
}
if (contact.length !== 10) {
alert("Contact number must be a 10-digit number");
return false;
}
if (email == "") {
alert("Email must be filled out");
return false;
}
return true;
}
</script>
</body>
</html>
stick this output on the blank side
