Проверка поля с JavaScript (Django для бэкэнда)

Question

Я работаю с формой оформления заказа и пытаюсь оформить форму проверки красным цветом, если поле недействительно. Это то, что у меня есть, и оно работает почти идеально:

(function() {

    const elementsList  = document.querySelectorAll("#id_street_adress, #id_zip_code, #id_country, #id_email");
    const elementsArray = [...elementsList];
    var form               = document.getElementById('form');
    var elem               = document.createElement('div');
    elem.id            = 'notify';
    elem.style.display = 'none';
    form.appendChild(elem);

    elementsArray.forEach(element => {
        element.addEventListener('invalid', function(event){
            event.preventDefault();
            if ( ! event.target.validity.valid ) {
                elem.textContent   = 'Please complete the fields below.';
                elem.className     = 'error';
                element.className  = 'input textinput textInput form-control invalid';
                elem.style.display = 'block';
            } else{
                element.className = 'input textinput textInput form-control';
            }  
        });
        element.addEventListener('input', function(event){
            if ( 'block' === elem.style.display ) {
                elem.className = '';
                elem.style.display = 'none';
            }
        });
    });    
})();

Проблема в том, что он добавит css класс invalid, если поле, очевидно, недопустимо, но он не удалит его, если пользователь изменит его на что-то, что на самом деле является допустимым. Это то, чего я пытаюсь достичь с этим else заявлением, но это не сработает. Я ценю любую помощь! Дайте мне знать, если вам нужен какой-либо другой код, поскольку я попытался сделать его максимально простым.

РЕДАКТИРОВАТЬ: Это html:

         <div class="col text-center" id="form">
                <form class="buy-form" id="payment-form" method="POST">
                    {% for error in non_field.errors %}
                    <h1>{{error}}</h1>
                    {% endfor %}
                    {% csrf_token %}
                    {% for field in form %}
                        <div class="required">{{ field|as_crispy_field }}</div>
                        {% for error in field.errors %}
                        <h1>{{ error }}</h1>
                        {% endfor %}
                    {% endfor %}
                    <button class="shop-btn" type="submit">Continue to shipping</button>
                </form>  
            </div>