JavaScript Предупреждение не отображается. addEventListener HTML Форма

Question

Я слежу за курсом InLearning и пытаюсь самостоятельно следовать коду. Однако, похоже, код не работает ни в одном браузере. Поскольку я новичок в кодировании, я не уверен, что является причиной проблемы.

Вот код JavsScript.

(function() {
"use strict";

var state = document.getElementById('s-state');

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('cart-hplus').addEventListener('submit', estimateTotal);

    var btnEstimate = document.getElementById('btn-estimate');

    btnEstimate.disabled = true;

    state.addEventListener('change',function() {

        if (state.value === '') {
            btnEstimate.disabled = true;
        } else {
            btnEstimate.disabled = false;

        }
    });
});



function estimateTotal(event) {
    event.preventDefault();

    if (state.value === '') {
        alert('Please choose your shipping state.');

        state.focus();
    }
}

})();

Вместо этого браузер распознает обязательное поле, прикрепленное к элементу html, и отображает встроенный

Соответствует HTML ниже.

<form class="cart" id="cart-hplus">

<div class="group calc">
                        <p>
                        <label for="btn-estimate">Click to estimate:</label><br>
                        <input type="submit" value="Estimate Total" id="btn-estimate">
                        <input type="text" id="txt-estimate" placeholder="$0.00">
                        </p>

                        <div id="results"></div>
                    </div>

<div class="group state">
                        <label for="s-state">State (required):</label>
                        <select id="s-state" required>
                            <option value="">- select -</option>
                            <option value="CA">California (7.5% tax)</option>
                            <option value="IL">Illinois</option>
                            <option value="NH">New Hampshire</option>
                            <option value="PA">Pennsylvania</option>
                        </select>
                    </div>

<script src="script.js"></script>
</body>
</html>

Мне известно об отключенной части, которая является отдельной проблемой, которая будет рассмотрена в следующей части файл. Я вижу, как они это исправляют. Моя проблема заключается в том, что когда я нажимаю на кнопку оценки общего объема отправки, JavaScript должен активировать предупреждение, а затем выделить поле состояния, если что-то не выбрано из списка.