document.addEventListener("DOMContentLoaded", function () {
            document.getElementById("userForm").addEventListener("submit", function (event) {
                let isValid = true;
                let requiredFields = document.querySelectorAll(".required");

                requiredFields.forEach(field => {
                    if (field.value.trim() === "") {
                        isValid = false;
                        field.style.border = "2px solid red";
                        let errorSpan = field.nextElementSibling;
                        if (!errorSpan || !errorSpan.classList.contains("error-message")) {
                            errorSpan = document.createElement("span");
                            errorSpan.classList.add("error-message");
                            errorSpan.style.color = "red";
                            errorSpan.textContent = "This field is required";
                            field.parentNode.insertBefore(errorSpan, field.nextSibling);
                        }
                    } else {
                        field.style.border = "";
                        let errorSpan = field.nextElementSibling;
                        if (errorSpan && errorSpan.classList.contains("error-message")) {
                            errorSpan.remove();
                        }
                    }
                });

                if (!isValid) {
                    event.preventDefault();
                }
            });
        });