Проверка текстового поля JS ⇐ Javascript

[Anonymous]

Я создаю контактную форму и проверяю ее с помощью прослушивателя событий JavaScript. Недопустимый прослушиватель событий работает с входными элементами из обязательного класса по умолчанию, добавленного в поля ввода. Однако он не работает для текстовой области, несмотря на то, что полю текстовой области присвоен класс «обязательный»?

Код: Выделить всё

document.forms.form01.addEventListener("invalid", function(e){
e.preventDefault();
e.target.classList.add('invalid');
}, true);

document.forms.form01.addEventListener("focus", function(e){
e.preventDefault();
[...e.target.form.querySelectorAll('.invalid')]
.forEach(elm => elm.classList.remove('invalid'));
}, true);

Код: Выделить всё

form {
width: 100%;
max-width: 500px;
margin: 0 auto;
}

form label {
display: inline-block;
width: 100%;
font-weight: bold;
}

form input[type="text"],
form input[type="email"],
form textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
margin-bottom: 20px;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 16px;
font-family: sans-serif;
}

form input[type="submit"] {
display: block;
width: 100%;
padding: 10px;
margin-top: 20px;
background-color: #4CAF50;
color: #fff;
font-size: 16px;
font-weight: bold;
border: none;
border-radius: 5px;
}

form .form-control.error input,
form .form-control.error textarea {
border-color: #f44336;
}

form .form-control.error small {
visibility: visible;
color: #f44336;
font-size: 14px;
}

form .form-control.success input,
form .form-control.success textarea {
border-color: #4CAF50;
}

form .form-control.success small {
visibility: hidden;
color: #4CAF50;
font-size: 14px;
}
.contact-form .required-label {
color: #ff0000;
font-weight: 400;
}

.form-group {
position: relative;
height:100px;
}

div.feedback {
border: solid thin red;
position: absolute;
left:0 ;
bottom:-10px;
width: 100%;
padding: .2em;
background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
display: none;
}

input.invalid~div.feedback {
display: block;
}

input:invalid {
border: thin solid red;
}

Код: Выделить всё

Name *

This needs to be a name


Email address *

Invalid email!


Message *

Empty message!


Submit

`

Подробнее здесь: https://stackoverflow.com/questions/797 ... validation