I made a Javascript/HTML table which has multiple dropdown questions (labeled as "dropdown1_left", "dropdown1_right", etc.) within the table that I want to be required. I have not been able to figure out how to make this work. Below is my code for this specific function. When I take the survey, the console log says “Listener must be a named function.” so this may be causing the problem. When I hit the next page button, I do get a pop-up saying “Please make a selection for all required dropdowns.” but it still moves on to the next page. So some level of the validation seems to be working but ultimately not the most important part (I want it to not allow users to go to the next page until all dropdowns are answered).

Any thoughts on how to make this work? I’m pretty new to Javascript and especially using it in Qualtrics so I am hoping to learn how to code this in. Thank you so much in advance.

Qualtrics.SurveyEngine.addOnPageSubmit(function(type) {
    if (type === "next") { // Trigger validation only when "Next" is clicked
        var requiredDropdownIDs = i
            "dropdown1_left", "dropdown1_right", "dropdown2_left", "dropdown2_right", 
            "dropdown3_left", "dropdown3_right", "dropdown4_left", "dropdown4_right",
            "dropdown5_left", "dropdown5_right", "dropdown6_left", "dropdown6_right", 
            "dropdown7_left", "dropdown7_right", "dropdown8_left", "dropdown8_right", 
            "dropdown9_left", "dropdown9_right", "dropdown10_left", "dropdown10_right", 
            "dropdown11_left", "dropdown11_right", "dropdown12_left", "dropdown12_right", 
            "dropdown13_left", "dropdown13_right", "dropdown14_left", "dropdown14_right", 
            "dropdown15_left", "dropdown15_right"
        ];

        var isValid = true; // Flag to track overall validation

        // Iterate through each dropdown and validate its value
        requiredDropdownIDs.forEach(function(id) {
            var dropdown = document.getElementById(id);

            // Log each dropdown ID and its value for debugging
            console.log("Checking dropdown:", id, "Value:", dropdown ? dropdown.value : "Not Found");

            if (dropdown && dropdown.value === "Select an option") {
                isValid = false; // Mark as invalid if dropdown is unselected
                dropdown.style.border = "2px solid red"; // Highlight unselected dropdown
            } else if (dropdown) {
                dropdown.style.border = ""; // Clear the border if dropdown is valid
            }
        });

        // If any dropdown is unselected, prevent form submission
        if (!isValid) {
            alert("Please make a selection for all required dropdowns.");
            jQuery("#NextButton").hide();
        }

        // Log success if all validations pass
        console.log("All dropdowns are selected. Proceeding to next page.");
    }
});