Practical Viewer

Aim (Write on the ruler page)

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.

Program (Start from new page after AIM)

<!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>

Output (Stick on blank page opposite to code)

Download Output