Specifying which field failed validation

I’m using an If statement to validate whether input fields meet certain criteria. In the case validation fails, an alert will appear and the input border turns red.

How can I ensure that only the input field that failed validation turns red? I considered separating them into If and Else, however, this will obviously do one or the other in the case both fail. This leads me to believe that If is not best suited here, or that there could be a way to specify inside the first If block.

!
if (
document.getElementById("name").value.length > "30" ||
document.getElementById("commentText").value.length > "100"
) {
document.getElementById("name").style.border = "2px solid red";
alert("Name must have fewer than 30 characters");
e.preventDefault();
} else {….

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

I updated the code as below, however, the first if statement which checks if both fields are invalid is not being executed… I’m not sure why?

Updated Code:

if (
    document.getElementById("name").value.length > 30 &&
    document.getElementById("commentText").value.length > 100
  ) {
    document.getElementById("name").style.border = "2px solid red";
    document.getElementById("commentName").style.border = "2px solid red";
    alert(
      "Name must have fewer than 30 characters, and comment fewer than 100 characters"
    );
    event.preventDefault();
    // document.getElementById("form").reset()
  } else if (document.getElementById("name").value.length > 30) {
    document.getElementById("name").style.border = "2px solid red";
    alert("Name must have fewer than 30 characters");
    event.preventDefault();
  } else if (document.getElementById("commentText").value.length > 100) {
    document.getElementById("commentText").style.border = "2px solid red";
    alert("Comment must have fewer than 100 characters");
    event.preventDefault();
  } else {....

>Solution :

Why not two separate if blocks? For example:

let isValid = true;
let errors = "";

if (document.getElementById("name").value.length > 30) {
  isValid = false;
  document.getElementById("name").style.border = "2px solid red";
  errors += "Name must have fewer than 30 characters. ";
}
if (document.getElementById("commentText").value.length > 100) {
  isValid = false;
  document.getElementById("commentText").style.border = "2px solid red";
  errors += "Comment must have fewer than 100 characters. ";
}

if (!isValid) {
  e.preventDefault();
  alert(errors);
} else {
  //...
}

Basically check each field and build up the validation errors, then respond to the overall failed validation at the end of those checks.