Steps to reproduce

Add the following code in the theme's cutom.js, and the situation will be better.

Expected result

$(document).on('ready pjax:scriptcomplete', function () {
    // Listen to form submission event
    $('#limesurvey').on('submit', function (e) {
        // Check if there are any unanswered mandatory questions
        var unansweredQuestions = $('.question-container.mandatory').filter(function () {
            return $(this).find('input:checked, textarea').length === 0;
        });

        if (unansweredQuestions.length > 0) {
            // Prevent form submission
            e.preventDefault();

            // Find the first unanswered question
            var firstUnansweredQuestion = unansweredQuestions.first();

            // Create a warning message
            var alertMessage = $('<div class="alert alert-warning alert-dismissible fade show" role="alert">' +
                'One or more mandatory questions have not been answered. Please complete them before continuing.' +
                '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' +
                '</div>');

            // Insert the warning message below the unanswered question
            alertMessage.insertAfter(firstUnansweredQuestion);

            // Scroll to the unanswered question
            $('html, body').animate({
                scrollTop: firstUnansweredQuestion.offset().top - 100
            }, 'fast');

            // Highlight the unanswered question
            firstUnansweredQuestion.addClass('unanswered-highlight');

            // Automatically hide the warning message after 2 seconds
            setTimeout(function () {
                alertMessage.alert('close'); // Use Bootstrap's alert method to close the message
            }, 2000);
        }
    });

    // Listen to user input events (selecting answers or entering text)
    $(document).on('change input', '.question-container.mandatory input, .question-container.mandatory textarea', function () {
        var questionContainer = $(this).closest('.question-container');

        // Remove the highlight if the question has been answered
        if (questionContainer.find('input:checked, textarea').length > 0) {
            questionContainer.removeClass('unanswered-highlight');
        }

        // Check if all mandatory questions have been answered
        var allAnswered = $('.question-container.mandatory').filter(function () {
            return $(this).find('input:checked, textarea').length === 0;
        }).length === 0;

        // Enable the submit button if all mandatory questions have been answered
        if (allAnswered) {
            $('#ls-button-submit').prop('disabled', false);
        }
    });

    // Add styles for unanswered questions
    $('<style>.unanswered-highlight { border: 2px solid red; padding: 10px; }</style>').appendTo('head');
});

Actual result

When you click submit, the page will automatically point to the first unanswered question, and a red box will be drawn around the first unanswered question. When you answer it, the red box will disappear. However, the submit button will be grayed out only if all questions are answered.