Error message displayed even with valid inputs

Issue

I was trying to validate my HTML form with the help of Javascript, but the error messages get displayed even after providing valid inputs. If I add 'preventDefault()', the error messages get displayed only with invalid inputs but the form gets submitted anyway. My code-

HTML

<form id="form" novalidate onsubmit="return validate()">

<label for="firstName">Enter your first name</label><br>
<input type="text" id="firstName" name="firstName" required><br>
<span role="alert" id="nameError" aria-hidden="true"> Please enter a valid name </span>
<label for="lastName">Enter your last name here</label><br>
<input type="text" id="lastName" name="lastName" required><br>
<span role="alert" id="lastNameError" aria-hidden="true"> Please enter a valid name </span> 
/*other elements in the form */

Javascript for error messages

const firstNameField = document.getElementById("firstName");
const lastNameField = document.getElementById("lastName");

let valid = true;

if (firstNameField.getAttribute(length)<3
|| firstNameField.getAttribute(pattern)!="[A-Za-z+]"
|| lastNameField.getAttribute(length)<3
|| lastNameField.getAttribute(pattern)!="[A-Za-z+]")
 {
const nameError = document.getElementById("nameError");
nameError.classList.add("visible");
firstNameField.classList.add("invalid");
nameError.setAttribute('aria-hidden', false);
nameError.setAttribute('aria-invalid', true);

const lastNameError = document.getElementById("lastNameError");
lastNameError.classList.add("visible");
lastNameField.classList.add("invalid");
lastNameError.setAttribute('aria-hidden', false);
lastNameError.setAttribute('aria-invalid', true);


valid = false;

}

return valid;
}

CSS for the error messages

#nameError, #lastNameError{
display: none;
font-size: 0.8em;
color: red;
}

#nameError.visible, #lastNameError.visible{
  display: block;
}

input.invalid {
 border-color: red;
}

I'm new to Javascript so any suggestions would be helpful for me

Solution

The root of your problem is in your validation tests where you call getAttribute() it does not have those attributes, you want to look at the element's value.
You can replace those statements with ones that check that the firstNameField.value and the lastNameField.value each match a regex /^[A-Za-z]{3}[A-Za-z]*$/ that checks for three or more characters in the set [A-Za-z] only. I would also recommend checking each input individually so that you are only changing what is invalid.

let validate = function() {
  const firstNameField = document.getElementById("firstName");
  const lastNameField = document.getElementById("lastName");
  const pattern = /^[A-Za-z]{3}[A-Za-z]*$/;

  let valid = true;
  if (!firstNameField.value.match(pattern)) {
    const nameError = document.getElementById("nameError");
    nameError.classList.add("visible");
    firstNameField.classList.add("invalid");
    nameError.setAttribute('aria-hidden', false);
    nameError.setAttribute('aria-invalid', true);

    valid = false;

  }
  if (!lastNameField.value.match(pattern)) {

    const lastNameError = document.getElementById("lastNameError");
    lastNameError.classList.add("visible");
    lastNameField.classList.add("invalid");
    lastNameError.setAttribute('aria-hidden', false);
    lastNameError.setAttribute('aria-invalid', true);

    valid = false;

  }

  return valid;
}

#nameError,
#lastNameError {
  display: none;
  font-size: 0.8em;
  color: red;
}

#nameError.visible,
#lastNameError.visible {
  display: block;
}

input.invalid {
  border-color: red;
}

<form id="form" novalidate onsubmit="return validate()">

  <label for="firstName">Enter your first name</label><br>
  <input type="text" id="firstName" name="firstName" required><br>
  <span role="alert" id="nameError" aria-hidden="true"> Please enter a valid name </span>
  <label for="lastName">Enter your last name here</label><br>
  <input type="text" id="lastName" name="lastName" required><br>
  <span role="alert" id="lastNameError" aria-hidden="true"> Please enter a valid name </span>
  <!-- /*other elements in the form */ -->
  <button>
    submit
  </button>
</form>

Answered By - Arleigh Hix