Как запретить отправку формы до валидации через js?

Question

[Danil Sergeev]

Форма визуально выглядит вот так:


Я сделал некоторую анимацию через фокус на инпуте и самое валидацию, написал её и решил допилить кнопку, в конечном итоге у меня отправляется запрос без прохождения валидации с помощю Js`а.

JavaScript код:


Html код формы
Оранжевым - кнопка при нажатии на которую происходит отправка.

Пытался реализовать через event.preventDefault() и через return validate() / return false.

Answer 1

[Sergey]

Добавьте событие onsubmit для формы, в котором будет проходить валидация формы и возвращайте нужный результат.
Вот так onsubmit="return validate()".

Comments

[Danil Sergeev]

Данный способ не подходит,запрос проходит сквозь валидацию js`а

Answer 2

[Алексей]

preventDefault на событие submit - выполнение проверок - при успешной проверке - вызов события submit. При ошибках - подсветка и очистка ошибочных полей