Html - How can I style a form when it doesn't submit because of a required field or some other issue

DarkPhoenix15
November 12, 2023
229 views
3 votes
3 Answers

I mean when there is an error in the input in the form due to required or empty fields, how can I style the form in that instance.
Like this
Notice how the form labels and fields are red. How can I do that?

I tried using the form submit event to find out if there are no values in the field but nothing happens. Please help.

function func() {
    alert("nice!");
    document.getElementById("form").submit();
    var day = document.getElementById("day").value;
    var month = document.getElementById("month").value;
    var year = document.getElementById("year").value;
    var dayLab = document.getElementById("dayLab");
    var monLab = document.getElementById("monLab");
    var yrLab = document.getElementById("yrLab");

    if (day == null || month == null || year == null) {
        dayLab.style.color = "rgb(200, 0, 0)";
        monLab.style.color = "rgb(200, 0, 0)";
        yrLab.style.color = "rgb(200, 0, 0)";
    }
}

Answers

Yes, you can achieve this by adding a CSS class to the labels and inputs when an error occurs.

function func() {
    var day = document.getElementById("day");
    var month = document.getElementById("month");
    var year = document.getElementById("year");
    var dayLab = document.getElementById("dayLab");
    var monLab = document.getElementById("monLab");
    var yrLab = document.getElementById("yrLab");

    if (!day.value || !month.value || !year.value) {
        dayLab.classList.add("error");
        monLab.classList.add("error");
        yrLab.classList.add("error");
        day.classList.add("error");
        month.classList.add("error");
        year.classList.add("error");
    } else {
        dayLab.classList.remove("error");
        monLab.classList.remove("error");
        yrLab.classList.remove("error");
        day.classList.remove("error");
        month.classList.remove("error");
        year.classList.remove("error");
        alert("nice!");
        document.getElementById("form").submit();
    }
}

.error {
    color: rgb(200, 0, 0);
    border-color: rgb(200, 0, 0);
}

Apply the required attribute to appropriate inputs:

<input type="text" required>
Add a listener on each input for the invalid event to add a class containing the styling you want.
(optional) Add a listener on each input for the blur event to validate the field and either add or remove the class depending on the result.

Note that if you submit a form programmatically using the submit() method, validation is not performed.

document.querySelectorAll('input[type=text]').forEach(e => {

  // when focus leaves an input, validate it
  e.addEventListener("blur", evt => {
    if (evt.target.checkValidity())
      evt.target.classList.remove('invalid')
    else
      evt.target.classList.add('invalid')
  })
  
  // form is automatically validated when submitted
  e.addEventListener("invalid", evt => {
    evt.target.classList.add('invalid')
  })
})

body, input {
  font-family: sans-serif;
  font-size: 16px;
}
input {
  padding: 3px 8px;
  border: 1px solid #eee;
  border-radius: 5px;
}
input[type=submit] {
  padding: 5px 12px;
}
label {
  display: block;
  margin-bottom: 1em;
}
.invalid {
  border: 1px solid red;
}
label:has(.invalid) {
  color: red;
}

<form id="f1">
  <label>First Name* <input type="text" required></label>
  <label>Last Name* <input type="text" required></label>
  <input type="submit">
</form>

You can make some styles when conditions are not met.

function func() {
    alert("nice!");

    const form = document.getElementById("form");
    const day = document.getElementById("day").value;
    const month = document.getElementById("month").value;
    const year = document.getElementById("year").value;
    const dayLab = document.getElementById("dayLab");
    const monLab = document.getElementById("monLab");
    const yrLab = document.getElementById("yrLab");

    if (!day || !month || !year) {
        dayLab.style.color = monLab.style.color = yrLab.style.color = "rgb(200, 0, 0)";
   
    } else {
   
        dayLab.style.color = "";
        monLab.style.color = "";
        yrLab.style.color = "";
        form.style.border = "";
        
        form.submit();
    }
}

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How can I style a form when it doesn't submit because of a required field or some other issue

Answers