After querySelectorAll("input") do something with only a specfic type

Question

I am making a validation function which displays an appropriate messagge for patternMismatch.

So far it displays the messagge, but it's the same for all input types.

const inputs = document.querySelectorAll("input");
inputs.forEach(function(input){

  input.addEventListener("blur", function() {

    if (input.validity.patternMismatch) {
      if (e_space) {
        e_space.textContent = "This field can only contain letters from a-z.";
        input.classList.add("b-r");
      }
    }

})

Now I am trying to display different messagges for different input types, but I can't seem to find a way to select a specific type.

I have tryed if(input.type["text"]), if(input.type.text) and if(input["type=text"] but no messagge gets displayed.

ie:

if(input.type["text"]){
  if(input.validity.patternMismatch){
     if(e_space){
        e_space.textContent = "This field can only contain letters from a-z.";
        input.classList.add("b-r");
     }
  input.classList.add("input-red");
  }
}

Any help would be welcome. Thank you.

fiddle

Answer 1

Use .matches to check if the input being iterated over matches a particular selector - such as, if it has an attribute:

if (input.matches('[type="text"]')) {