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

Create html javascript for a form with large number of fields for validation testing.

Yellowed Yacare answered on September 22, 2023 Popularity 1/10 Helpfulness 1/10

answer Create html javascript for a form with large number of fields for validation testing.

Create html javascript for a form with large number of fields for validation testing.

Comment

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

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

        <!-- Number Input -->
        <label for="age">Age:</label>
        <input type="number" id="age" name="age" required>
        <span class="error" id="ageError"></span>

        <!-- Radio Buttons -->
        <p>Gender:</p>
        <label for="male">Male</label>
        <input type="radio" id="male" name="gender" value="male">
        <label for="female">Female</label>
        <input type="radio" id="female" name="gender" value="female">
        <span class="error" id="genderError"></span>

        <!-- Checkboxes -->
        <p>Select your interests:</p>
        <label for="interests1">Interest 1</label>
        <input type="checkbox" id="interests1" name="interests[]" value="interest1">
        <label for="interests2">Interest 2</label>
        <input type="checkbox" id="interests2" name="interests[]" value="interest2">
        <span class="error" id="interestsError"></span>

        <!-- Textarea -->
        <label for="comments">Comments:</label>
        <textarea id="comments" name="comments" rows="4" cols="50" required></textarea>
        <span class="error" id="commentsError"></span>

        <!-- Submit Button -->
        <input type="submit" value="Submit">
    </form>

    <script>
        const form = document.getElementById("validationForm");

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

            // Name Validation
            const name = document.getElementById("name");
            const nameError = document.getElementById("nameError");
            if (name.value.trim() === "") {
                nameError.textContent = "Name is required";
                isValid = false;
            } else {
                nameError.textContent = "";
            }

            // Email Validation
            const email = document.getElementById("email");
            const emailError = document.getElementById("emailError");
            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailPattern.test(email.value)) {
                emailError.textContent = "Invalid email address";
                isValid = false;
            } else {
                emailError.textContent = "";
            }

            // Age Validation
            const age = document.getElementById("age");
            const ageError = document.getElementById("ageError");
            if (isNaN(age.value) || age.value < 0) {
                ageError.textContent = "Age must be a positive number";
                isValid = false;
            } else {
                ageError.textContent = "";
            }

            // Gender Validation
            const gender = document.querySelector('input[name="gender"]:checked');
            const genderError = document.getElementById("genderError");
            if (!gender) {
                genderError.textContent = "Please select a gender";
                isValid = false;
            } else {
                genderError.textContent = "";
            }

            // Interests Validation
            const interests = document.querySelectorAll('input[name="interests[]"]:checked');
            const interestsError = document.getElementById("interestsError");
            if (interests.length === 0) {
                interestsError.textContent = "Select at least one interest";
                isValid = false;
            } else {
                interestsError.textContent = "";
            }

            // Comments Validation
            const comments = document.getElementById("comments");
            const commentsError = document.getElementById("commentsError");
            if (comments.value.trim() === "") {
                commentsError.textContent = "Comments are required";
                isValid = false;
            } else {
                commentsError.textContent = "";
            }

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

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: chat.openai.com

Tags: fields-for form-with html javascript validation

Link to this answer
Share Copy Link

Contributed on Sep 22 2023

Yellowed Yacare

0 Answers Avg Quality 2/10

Create html javascript for a form with large number of fields for validation testing.

Contents

More Related Answers

Create html javascript for a form with large number of fields for validation testing.

Grepper

Documentation

Social

Legal

Contact

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