Валидация формы на сайте js

Не все браузеры поддерживают валидацию на html, поэтому в помощь приходит js

Как валидировать формы на сайте с помощью javascript:

Есть несколько функций DOM, которые могут созданы для обработки форм:

HTMLButtonElement (для элемента <button>)
HTMLFieldSetElement (для элемента  <fieldset>)
HTMLInputElement (для элемента  <input>)
HTMLOutputElement (для элемента  <output>)
HTMLSelectElement (для элемента  <select>)
HTMLTextAreaElement (для элемента  <textarea>)

Пример 1:

<form>
    <label for="mail">Подпишись на меня, введя e-mail:</label>
    <input type="email" id="mail" name="mail" />
    <button>Отправить</button>
</form>

и js:

const email = document.getElementById("mail");

email.addEventListener("input", function (event) {
    if (email.validity.typeMismatch) {
        email.setCustomValidity("Дружище, я то жду e-mail , может корректнее?");
    } else {
        email.setCustomValidity("");
    }
});

Тут прослушивается поле email и проверяется на корректность Каждый раз!!! в этом и сила javascript. 

Если метод typeMusmatch возвращает true, что означает, что поле не соответствует типу email и далее с помощью метода setCustomValidity можно вывести любое кастомное сообщение, иначе просто пустое возвращаем.

Но, если validity.typeMismatch возвращает false, мы вызываем метод setCustomValidity() с пустой строкой и форма все же может быть отправлена, что обычно не нужно!

Смотрите также: валидация формы на html