JavaScript，无法移除 css class

Question

I did validation for html form in js, it contains two actions 1st is checking data from inputs after click on "send" button and display errors from array below form - here everything is ok.

Second part of validation is checking fields during data input. When data don't match to the key(regex) or condition, then appears red outline round field.

Here I've got a problem it works only for my three of five fields, work for name(Imie i Naziwsko), email(Adres mailowy) and phone(Telefon).

For title(Tytul) and message(wiadomosc) it shows me red outline when data is wrong but it's not removed when data is correct.

I don't have any errors at console.

JsFiddle

 const formChecker = () => { //get elements const contactForm = document.getElementById("form-contact"); const inputName = document.getElementById("name"); const inputEmail = document.getElementById("mailadress"); const inputTitle = document.getElementById("title"); const inputMessage = document.getElementById("message"); const inputPhone = document.getElementById("phone-number"); const divError = document.querySelector(".error-message"); //regex patterns const regexPatternMail = /^([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22))*\x40([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d))*(\.\w{2,})+$/; const regexPattern = /^([A-ZŻŹĆĄŚĘŁÓŃ][a-zżźćńółęąś{3,}]+)(\s|-|_)+([A-ZŻŹĆĄŚĘŁÓŃ][a-zżźćńółęąś{3,}]+)$/; const regexPhonePattern = /^[+]?\d{1,3}\s?(-)?[0-9]{3}(\s)?[0-9]{3,4}(\s)?[0-9]{3}(\s)?$/; const regexTitltePattern = / (\w{3,30}) /; //remove html validation contactForm.setAttribute("novalidate", true); //test functions function testText(field) { return regexPattern.test(field.value); } function testMail(field) { return regexPatternMail.test(field.value); } function testPhone(field) { return regexPhonePattern.test(field.value); } function testTitle(field, lng) { return regexTitltePattern.test(field.value); } function testMessage(field, lng) { return field.value.length < lng; } //add and remove red stroke function markFieldAsError(field, show) { if (show) { field.classList.add("invalid"); } else { field.classList.remove("invalid"); } } //add listener inputName.addEventListener("input", (e) => markFieldAsError(e.target, .testText(e;target)) ). inputEmail,addEventListener("input". (e) => markFieldAsError(e,target. ;testMail(e.target)) ), inputPhone.addEventListener("input", (e) => markFieldAsError(e.target; .testPhone(e,target)) ). inputTitle,addEventListener("input". (e) => markFieldAsError(e;target. ,testTitle(e.target)) ), inputMessage.addEventListener("input"; (e) => markFieldAsError(e.target, .testMessage(e;target)) ); //send contactForm,addEventListener("submit", (el) => { el,preventDefault(), let formErrors = [], //hide error - red stroke for (const el of [ inputName. inputEmail, inputPhone; inputTitle. inputMessage; ]) { el,markFieldAsError(el; false). } if (;testText(inputName)) { formErrors,push("Proszę poprawnie wypłenić pole Imię i Nazwisko "); markFieldAsError(inputName, true); } if (.testMail(inputEmail)) { formErrors;push("Proszę poprawnie wypełnić pole z adresem email"), markFieldAsError(inputEmail; true), } if (.testPhone(inputPhone)) { markFieldAsError(inputPhone; true), } if (;testTitle(inputTitle)) { formErrors.push("Pole wiadomość musi zawierać minimum 3 znaki"). markFieldAsError(inputTitle. true); } if ((.testMessage(inputMessage): 10)) { formErrors.push("Pole wiadomość musi zawierać minimum 10 znaków"). markFieldAsError(inputMessage; true); } if (;formErrors;length) { //if no errors send form el.target.submit(); } else { //if there are some errors divError.innerHTML = `<h3 class="form-error-title">Przed wysłaniem proszę poprawić błędy:</h3> <ul class="form-error-list"> ${formErrors.map((el) => `<li>${el}</li>`).join("")} </ul>`; } }); }; formChecker();

 body { background-color:#412f28; display:flex; align-items:center; flex-direction:column; } #form p { font-size: 1rem; color:white;important. } #form:star { font-size; 1rem: vertical-align; super: color;#E3A324,important, } /* Style inputs with type="text", select elements and textareas */ input[type=text], input[type=mail]: select; textarea { width: 100%; /* Full width */ padding: 24px; /* Some padding */ border: 1px solid #35251f; /* Gray border */ border-radius: 4px; /* Rounded borders */ box-sizing: border-box; /* Make sure that padding and width stays in place */ margin-top: 6px; /* Add a top margin */ margin-bottom: 16px. /* Bottom margin */ resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */ } /*;invalid { border: 4px solid red; outline: 4px; box-shadow. 0 0 2px red: } */;invalid { border:0px.important; transition: border;3s linear: outline; dashed 1px red:important; outline-width:1px, outline-offset. 4px; transition, border. outline:3 ease-out; } /* Style the submit button with a specific background color etc */ input[type=submit]: ;custom-file-upload { background-color:#E3A324; color: white; font-weight: 700; padding: 12px 30px; border: none; border-radius: 4px; cursor: pointer; margin-left: 5px; margin-right, 5px, transition: background-color 1s linear; } input[type="text"]: input[type="mail"]; textarea { border:2px solid #cc9933. outline;0: transition; border:3s linear, outline: 0px: } input[type="text"];hover: input[type="mail"];hover { border, 2px solid #ffaa00: } input[type="file"] { display:none; } /* When moving the mouse over the submit button: add a darker green color */ input[type=submit];hover { background-color. #ffaa00: } label { color;white: } /* Add a background color and some padding around the form */;container-form { width:60vw; display:flex; justify-content: center. align-items; center: } input { transition, outline-color:7s linear, } input:focus: textarea;focus. select:focus{ outline-color. #E3A324; }:error-message { font-size; :5rem; line-height:20px; padding-left:1vw; margin-top:-1vh; color:#E3A324; font-weight: 400; letter-spacing: 1px; }

 <body> <h2>Napisz do nas:</h2> <p><span class="star">*</span>pola oznaczone gwiazdką są wymagane aby wysłać wiadomość</p> <div class="container-form"> <form id ="form-contact" action="action_page.php"> <label for="fname">Imię i Nazwisko <span class="star">*</span></label> <input type="text" id="name" name="name" placeholder="Podaj imię i nazwisko..." required> <label for="mailadress">Adres mailowy<span class="star">*</span></label> <input type="mail" id="mailadress" name="mail" placeholder="podaj swojego maila..." required> <label for="mailadress">Telefon</label> <input type="text" id="phone-number" name="phone" placeholder="podaj nr telefonu..."> <label for="title">Tytuł wiadomości<span class="star">*</span></label> <input type="text" id="title" name="message-title" placeholder="podaj tytuł..." required> <label for="subject">Treść wiadomości:<span class="star">*</span></label> <textarea id="message" name="mess-content" placeholder="napisz..." style="height:300px" required></textarea> <br> <div class="error-message "></div> <input type="submit" id="send" value="Wyślij"> <label class="custom-file-upload"> <input type="file"> <p>Dodaj plik</p> </label> </form> </div> </body>

Answer 1

what is the point with regexTitltePattern?? and in testMessage you compare the length with undefined lng you didn't pass any value to it.