<html>
<head>
    <title>Handling Multiple Forms Example</title>
    <style>
        .error {
            color: red;
        }
    </style>
</head>
<body>

    <h2>Handling Multiple Forms Example</h2>
    
    <form id="form1" onsubmit="return validateForm('form1')">
        <label for="field1">Field 1:</label>
        <input type="text" id="field1" name="field1">
        <span id="field1Error" class="error"></span>
        <br>
        <input type="submit" value="Submit Form 1">
    </form>

    <form id="form2" onsubmit="return validateForm('form2')">
        <label for="field2">Field 2:</label>
        <input type="text" id="field2" name="field2">
        <span id="field2Error" class="error"></span>
        <br>
        <input type="submit" value="Submit Form 2">
    </form>

    <script>
        function validateForm(formId) {
            let isValid = true;

            if (formId === 'form1') {
                const field1 = document.getElementById('field1');
                const field1Error = document.getElementById('field1Error');
                field1Error.innerHTML = "";

                if (field1.value.trim() === "") {
                    field1Error.innerHTML = "Field 1 is required.";
                    isValid = false;
                }
            }

            if (formId === 'form2') {
                const field2 = document.getElementById('field2');
                const field2Error = document.getElementById('field2Error');
                field2Error.innerHTML = "";

                if (field2.value.trim() === "") {
                    field2Error.innerHTML = "Field 2 is required.";
                    isValid = false;
                }
            }

            if (isValid) {
                alert(formId + " submitted successfully!");
            }

            return isValid;
        }
    </script>

</body>
</html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.