Проверка заполненности input при наличии атрибута required

[grafnet]

1. Есть очень простая проверка полей в форме авторизации

loginForm.addEventListener("submit", function(event) {  if (!(inputLogin.value && inputPassword.value)) {    event.preventDefault();    console.log("Введите логин и пароль")  } else {    ...  }});

Это работает до тех пор, если не добавить атрибут required для input, т.е. выполнение js условия 

 

if (!(inputLogin.value && inputPassword.value))

 

блокируется. Как быть в таких случаях, когда нужно, чтобы и required присутствовал и событие выполнялось?

 

2. Если поля незаполненные - добавляю ксласс ошибки модальному окну. 

 

popupLogin.classList.toggle("modal-error");

Но при повторном попытке отправки формы - класс modal-error не удаляется.

[li4e]

Событие "submit" сработает только если форма будет валидной, чтобы выполнять скрипт всегда, повесьте обработчик на кнопку подтверждения например.