Change border color for an invalid input after submit

Question

I want to change the border color in red after the form is submitted if the field is empty.

 const contactForm = document.querySelector(".contact-form"); const firstName = document.querySelector("#first-name"); const lastName = document.querySelector("#last-name"); contactForm.addEventListener("submit", submitForm); function submitForm(e) { e.preventDefault(); const firstNameValue = firstName.value; const lastNameValue = lastName.value; const messageValue = message.value; if (firstNameValue === "") { firstName.style.border = "2px solid red"; return false; } if (lastNameValue === "") { lastName.style.border = "2px solid red"; } if (messageValue === "") { message.style.border = "2px solid red"; } }

 <form action="" class="contact-form"> <div class="form-check"> <input type="text" id="first-name" name="first-name" placeholder="First Name" required> </div> <div class="form-check"> <input type="text" id="last-name" name="last-name" placeholder="Last Name" required> </div> <button class="submit-button" type="submit">Submit</button> </form>

I also tried to add a class in javascript for input elemets, when they are invalid. But it didn't work. I know there are plenty ways to do it, but I checked and I couldn't make them work on my form. :(

I can't figure it out what I am missing, can you help me please? Thank you!

Answer 1

You're almost there but you got a couple of things a bit wrong. First off you don't have a submit button. Then even if you had one you wouldn't be able to submit a form with any of the fields empty because you marked them all as required . Also the submitForm function has a non-existent message that you're checking.

After removing it it all seems to work fine.

 const contactForm = document.querySelector(".contact-form"); const firstName = document.querySelector("#first-name"); const lastName = document.querySelector("#last-name"); contactForm.addEventListener("submit", submitForm); function submitForm(e) { e.preventDefault(); const firstNameValue = firstName.value; const lastNameValue = lastName.value; if (firstNameValue === "") { firstName.style.border = "2px solid red"; } if (lastNameValue === "") { lastName.style.border = "2px solid red"; } }

 <form action="" class="contact-form"> <div class="form-check"> <input type="text" id="first-name" name="first-name" placeholder="First Name"> </div> <div class="form-check"> <input type="text" id="last-name" name="last-name" placeholder="Last Name"> </div> <input type="submit" /> </form>

Answer 2

If you are planning on using required attribute, you can use input:invalid selector in CSS

input:invalid
{
  border: 2px solid pink;
}

This will automatically style the elements without need submitting the form.

However in many cases there is a more comprehensive form validation required in which case required attribute should be avoided and an invalid field can be manually styled by applying a css class to them:

 const contactForm = document.querySelector(".contact-form"); const firstName = document.querySelector("#first-name"); const lastName = document.querySelector("#last-name"); contactForm.addEventListener("submit", submitForm); contactForm.addEventListener("input", validateInput); function validateInput(e) { let isInvalid = false; const value = e.target.value.trim(); switch (e.target.name) { case "first-name": isInvalid = value === "" || value == "test"; break; case "last-name": isInvalid = value === ""; break; case "message": isInvalid = value === ""; break; } e.target.classList.toggle("invalid", isInvalid); return isInvalid; } function submitForm(e) { e.preventDefault(); const isInvalid = validateInput({target: firstName}) | validateInput({target: lastName}) | validateInput({target: message}); if (isInvalid) { //not all fields are valid do something here } }

 .invalid { border: 2px solid red; background-color: pink; }

 <form action="" class="contact-form"> <div class="form-check"> <input type="text" id="first-name" name="first-name" placeholder="First Name" value="test"> </div> <div class="form-check"> <input type="text" id="last-name" name="last-name" placeholder="Last Name"> </div> <div class="form-check"> <textarea id="message" name="message" placeholder="Message"></textarea> </div> <button>submit</button> </form>

PS Avoid using inline styles, use css classes when possible instead.

Answer 3

how to let the red color disappear when star typing?

 const contactForm = document.querySelector(".contact-form"); const firstName = document.querySelector("#first-name"); const lastName = document.querySelector("#last-name"); contactForm.addEventListener("submit", submitForm); contactForm.addEventListener("input", validateInput); function validateInput(e) { let isInvalid = false; const value = e.target.value.trim(); switch (e.target.name) { case "first-name": isInvalid = value === "" || value == "test"; break; case "last-name": isInvalid = value === ""; break; case "message": isInvalid = value === ""; break; } e.target.classList.toggle("invalid", isInvalid); return isInvalid; } function submitForm(e) { e.preventDefault(); const isInvalid = validateInput({target: firstName}) | validateInput({target: lastName}) | validateInput({target: message}); if (isInvalid) { //not all fields are valid do something here } }

 .invalid { border: 2px solid red; background-color: pink; }

 <form action="" class="contact-form"> <div class="form-check"> <input type="text" id="first-name" name="first-name" placeholder="First Name" value="test"> </div> <div class="form-check"> <input type="text" id="last-name" name="last-name" placeholder="Last Name"> </div> <div class="form-check"> <textarea id="message" name="message" placeholder="Message"></textarea> </div> <button>submit</button> </form>