JS-Textbereichsvalidierung ⇐ JavaScript

[Anonymous]

Ich erstelle ein Kontaktformular und validiere es mithilfe des Javascript-Ereignis-Listeners. Der ungültige Ereignis-Listener funktioniert für die Eingabeelemente aus der standardmäßig erforderlichen Klasse, die den Eingabefeldern hinzugefügt wurde. Es funktioniert jedoch nicht für den Textbereich, obwohl dem Textbereichsfeld auch die „erforderliche“ Klasse zugewiesen wurde?

Code: Select all

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);

Code: Select all

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;
}

Code: Select all

Name *

This needs to be a name


Email address *

Invalid email!


Message *

Empty message!


Submit

`