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 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!

• javascript

• 1 your code looks OK at a glance - but you have no submit button so there is no way to actually trigger the submit event – Robin Zigmond Commented Aug 9, 2021 at 18:19
• @RobinZigmond there's contactForm.addEventListener("submit", submitForm); – Bellash Commented Aug 9, 2021 at 18:26
• @Bellash - not sure what you're saying. That attaches the event handler, but without the submit button, there's no way for a user to trigger the event. – Robin Zigmond Commented Aug 9, 2021 at 18:30

2 Answers 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 prehensive 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>

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

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>