Specifying which field failed validation-CodePudding

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 {....

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 {....

CodePudding user response：

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.

CodePudding user response：

data type return by .length is number not a string. Also change the comparison sign.

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{
   //your stuff goes here
}

CodePudding user response：

I would have another if field for commentText id

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