Changing HTML Object Property

Question

I have a dynamic form validation event listener, which checks if an input is valid or not.

However, even when the input technically isn't valid, the HTML Object Property validity -> Valid is set to "True".

I cant figure out how I can trigger it to change between "True" or "False" based on if it's valid or not in my javascript function.

function validateEventName(){
  const reEventName = /^[a-åA-Å0-9]{2,25}$/;
  if(!reEventName.test(inputEventName.value)) {
    inputEventName.classList.add("is-invalid");
    inputEventName.classList.remove("is-valid");
    inputEventName.checkValidity();
  } else {
    inputEventName.classList.remove("is-invalid")
    inputEventName.classList.add("is-valid")
  }
}

I need to be able to change the inputEventName.valididty.valid between "True" or "False" based on if it's valid or not with the function in my code above.

Answer 1

use document.getElementById()

function validateEventName(){
      const reEventName = /^[a-åA-Å0-9]{2,25}$/;
      if(!reEventName.test(document.getElementById("dynamicID").value )) {
        inputEventName.classList.add("is-invalid");
        inputEventName.classList.remove("is-valid");
        inputEventName.checkValidity();
      } else {
        inputEventName.classList.remove("is-invalid")
        inputEventName.classList.add("is-valid")
      }
    }