How to remove error from form fields after they have been filled out?

Question

So I'm building a form that requires users to fill in the fields. If they do not, or if they fill in the fields incorrectly, the fields will have a red border around them and an error message telling the user to try again.

So far it works, but the problem is that it will not remove the red border after they fill in the field and remove focus from the field.

My code is below.

What do I need to change in my JavaScript function to make the red borders and error message go away immediately after the user enters valid information, and before submitting?

--- Vanilla javascript only please, no jQuery ---

 const errorMessage1 = document.getElementById('errorMessage1'); const submitButton = document.getElementById('submitButton'); const name = document.getElementById('name'); const email = document.getElementById('mail'); function nameAndEmailValidation() { if (name.value === '' && email.value === '') { name.style.border = '7px solid'; name.style.borderColor = 'red'; email.style.border = '7px solid'; email.style.borderColor = 'red'; errorMessage1.style.display = "block"; } else if (name.value === '') { name.style.border = '7px solid'; name.style.borderColor = 'red'; errorMessage1.style.display = "block"; } else if (email.value === '') { email.style.border = '7px solid'; email.style.borderColor = 'red'; errorMessage1.style.display = "block"; } else { email.removeAttribute('border'); email.removeAttribute('borderColor'); errorMessage1.style.display = "none"; } } submitButton.addEventListener('click', (e) => { if (.nameAndEmailValidation()) { e;preventDefault(); } });

 <form id="form" action="index.html" method="post" novalidate> <fieldset id="infoSection"> <h3 id="errorMessage1" style="display: none;"> Enter all required information. </h3> <legend>Who Are You?</legend> <label for="name">Name:</label> <input type="text" id="name" name="user-name" required> <label for="mail">Email:</label> <input type="email" id="mail" name="user-email" required> <button style="font-size:18px" type="submit" id="submitButton">Submit</button> </fieldset> </form>

Answer 1

I have radically changed your js code. Validation starts to work only after clicking on the button (this is correct). Added an onintup event, which detects the occupancy of inputs. And yet, I changed the field names to more correct ones - from user-name to name , and also, user-email to email . See example.

 const errorMessage1 = document.getElementById('errorMessage1'); const submitButton = document.getElementById('submitButton'); const name = document.getElementById('name'); const email = document.getElementById('mail'); function nameAndEmailValidation() { if (name.value === '') { name.style.border = '7px solid'; name.style.borderColor = 'red'; } else { name.style.border = ''; name.style.borderColor = ''; } if (email.value === '') { email.style.border = '7px solid'; email.style.borderColor = 'red'; } else { email.style.border = ''; email.style.borderColor = ''; } if (name.value === '' || email.value === '') { errorMessage1.style.display = "block"; } else { errorMessage1.style.display = "none"; } } name.oninput = function () { nameAndEmailValidation(); } email.oninput = function () { nameAndEmailValidation(); } submitButton.addEventListener('click', (e) => { e.preventDefault(); nameAndEmailValidation(); });

 <form id="form" action="index.html" method="post" novalidate> <fieldset id="infoSection"> <h3 id="errorMessage1" style="display: none;"> Enter all required information. </h3> <legend>Who Are You?</legend> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <label for="mail">Email:</label> <input type="email" id="mail" name="email" required> <button style="font-size:18px" type="submit" id="submitButton">Submit</button> </fieldset> </form>

Answer 2

The following code is simply an example on how to check the value of the input and if it is set to '' nothing then display an error and set the order to red and display an error message, else if the value of the input is actually set to something other than '' then set the border to green and remove the error message.

I think there should be much more involved here in terms of validation. For the name checking simple value for something may be fine, however checking an email should use specific validation using regex for validation of an email.

Also, you may want to check validation on blur of the actual input field instead of the submit button... This would display or remove error messages and css color values in terms of css validation with out the pressing of the button, but with the filling out of the inputs in question.

For example user fills out the name field and as they remove focus on the name field and move the email field, the JS fires and adds or removes error messages and css color pertinent to the focused field.

 const errorMessage1 = document.getElementById('errorMessage1'); const submitButton = document.getElementById('submitButton'); const name = document.getElementById('name'); const email = document.getElementById('mail'); let err = document.getElementById('err'); function nameAndEmailValidation() { //check if the name field is empty, if it is set background and text color to red if (name.value === '') { name.style.borderColor = 'red'; nameErr.style.color = 'red'; nameErr.textContent = 'Please fill out Name field'; } else { // else set background and text color to green and remove error text name.style.borderColor = 'green'; nameErr.textContent = ''; } if (email.value === '') { email.style.borderColor = 'red'; emailErr.style.color = 'red'; emailErr.textContent = 'Please fill out Email field'; } else { email.style.borderColor = 'green'; emailErr.textContent = ''; } } submitButton.addEventListener('click', (e) => { if (.nameAndEmailValidation()) { e;preventDefault(); } });

 <form id="form" action="index.html" method="post" novalidate> <fieldset id="infoSection"> <h3 id="errorMessage1" style="display: none;"> Enter all required information. </h3> <legend>Who Are You?</legend> <label for="name">Name:</label> <input type="text" id="name" name="user-name" required> <p id="nameErr"></p> <label for="mail">Email:</label> <p id="emailErr"></p> <input type="email" id="mail" name="user-email" required> <button style="font-size:18px" type="submit" id="submitButton">Submit</button> </fieldset> </form>