Почему не работает встряска модального окна?

Question

[DeveloperV]

<section class="modal modal-login">
        <h2>Личный кабинет</h2>
        <p>Введите свой логин и пароль</p>
        <form class="login-form" method="post">
            <p>
                <label class="visually-hidden" for="user-login">Логин</label>
                <input id="user-login" class="login-icon-user" type="text" name="login" placeholder="Логин" required>
            </p>
            <p>
                <label class="visually-hidden" for="user-password">Пароль</label>
                <input id="user-password" class="login-icon-password" type="password" name="password" placeholder="Пароль" required>
            </p>
            <p class="login-help">
                <label class="login-checkbox">
                    <input type="checkbox" name="remember" class="visually-hidden">
                    <span class="checkbox-indicator"></span>
                    Запомните меня
                </label>
                <a href="#" class="restore">Я забыл пароль!</a>
            </p>
            <button class="button" type="submit">Войти</button>
        </form>
        <button class="modal-close" type="button"><span class="visually-hidden">Закрыть</span></button>
    </section>

.modal {
    position: absolute;
    display: none;
    color: #000;
    background-color: #f7f4f1;
    background-image: url(../img/bg-main.jpg);
    background-position: 0 0;
    background-repeat: repeat;
    box-shadow: 0 30px 50px rgba(0, 0, 0, 0.7);
    z-index: 2;
}

@keyframes bounce {
    0% {
        transform: translateY(-2000px);
    }

    70% {
        transform: translateY(30px);
    }

    90% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

.modal-show {
    display: block;
    animation: bounce 0.6s;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-10px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(10px);
    }
}

.modal-error {
    animation: shake 0.6s;
}

var link = document.querySelector(".login-link");
    var popup = document.querySelector(".modal-login");
    var close = document.querySelector(".modal-close");
    var form = popup.querySelector("form");
    var login = popup.querySelector("[name=login]");
    var password = popup.querySelector("[name=password]");
    var storage = localStorage.getItem("login");


    link.addEventListener("click", function(evt) {
        evt.preventDefault();
        popup.classList.add("modal-show");
        if (storage) {
            login.value = storage;
            password.focus();
        } else {
            login.focus();
        }
    });
    close.addEventListener("click", function(evt) {
        evt.preventDefault();
        popup.classList.remove("modal-show");
        popup.classList.remove("modal-error");
    });
    form.addEventListener("submit", function(evt) {
        if (!login.value || !password.value) {
            evt.preventDefault();
            popup.classList.add("modal-error");
        } else {
            if (isStorageSupport) {
                localStorage.setItem("login", login.value);
            }
        }
    });

    window.addEventListener("keydown", function(evt) {
        if (evt.keyCode === 27) {
            evt.preventDefault();

            if (popup.classList.contains("modal-show")) {
                popup.classList.remove("modal-show");
            }
        }
    });

Answer 1

[Ankhena]

Потому что вы проверяете на пустое поле или нет. А в тот момент, когда дело доходит до скрипта эти поля никогда не пустые, потому что об этом позаботился браузер проверив required.

Comments

[DeveloperV]

Спасибо, исправил