Breaking News: Grepper is joining You.com. Read the official announcement!

create an html form to input Name, Social Security number, email and address with validation

Timreals answered on October 4, 2023 Popularity 1/10 Helpfulness 1/10

answer create an html form to input Name, Social Security number, email and address with validation

create an html form to input Name, Social Security number, email and address with validation

Comment

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Validation</title>
    <style>
        .error {
            color: red;
        }
    </style>
</head>
<body>
    <h1>Input Form</h1>
    <form id="myForm" action="#" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        <span class="error" id="nameError"></span><br>

        <label for="ssn">Social Security Number:</label>
        <input type="text" id="ssn" name="ssn" pattern="[0-9]{3}-[0-9]{2}-[0-9]{4}" placeholder="e.g., 123-45-6789" required>
        <span class="error" id="ssnError"></span><br>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <span class="error" id="emailError"></span><br>

        <label for="address">Address:</label>
        <textarea id="address" name="address" rows="4" required></textarea>
        <span class="error" id="addressError"></span><br>

        <input type="submit" value="Submit">
    </form>

    <script>
        const form = document.getElementById("myForm");
        const name = document.getElementById("name");
        const ssn = document.getElementById("ssn");
        const email = document.getElementById("email");
        const address = document.getElementById("address");

        form.addEventListener("submit", function (event) {
            let valid = true;

            // Name validation (letters and spaces only)
            if (!/^[a-zA-Z\s]+$/.test(name.value)) {
                document.getElementById("nameError").textContent = "Name must contain only letters and spaces";
                valid = false;
            } else {
                document.getElementById("nameError").textContent = "";
            }

            // SSN validation (XXX-XX-XXXX format)
            if (!/^\d{3}-\d{2}-\d{4}$/.test(ssn.value)) {
                document.getElementById("ssnError").textContent = "Invalid SSN format (XXX-XX-XXXX)";
                valid = false;
            } else {
                document.getElementById("ssnError").textContent = "";
            }

            // Email validation (using HTML5 built-in validation)
            if (!email.checkValidity()) {
                document.getElementById("emailError").textContent = "Invalid email address";
                valid = false;
            } else {
                document.getElementById("emailError").textContent = "";
            }

            // Address validation (required field)
            if (!address.value.trim()) {
                document.getElementById("addressError").textContent = "Address is required";
                valid = false;
            } else {
                document.getElementById("addressError").textContent = "";
            }

            if (!valid) {
                event.preventDefault(); // Prevent form submission if there are errors
            }
        });
    </script>
</body>
</html>

Popularity 1/10 Helpfulness 1/10 Language html

Source: chat.openai.com

Tags: email html input security validation

Link to this answer
Share Copy Link

Contributed on Oct 04 2023

Timreals

0 Answers Avg Quality 2/10

create an html form to input Name, Social Security number, email and address with validation

Contents

More Related Answers

create an html form to input Name, Social Security number, email and address with validation

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.