Blur / form inputs - dobra praktyka / pure js

Witam,

Mam pytanie pewnie dla wielu trywialne.
Mając Form i trzy inputy dla których chcemy sprawdzić validacje. Validację nie ogarniemy poprzez html/css bo chodzi np o sprawdzenie konkretnych danych ( mniejsza o to ).
Inputy mają mieć taką samą walidację ( a przynajmniej więcej niż jeden, ponieważ wtedy mój problem ma sens ).

Validację chcę obsłużyć po utracie focusa, czyli onblur.

I tu pojawia się problem. Blur nie ma bubblinga.

Jak obsłużyć taki blur by było ładnie i elegancko ?

Czy zrobienie to tak:

inputs = this.ingredients.querySelectorAll('input');

  checkListenerInput() {
    this.inputs.forEach(
      inp =>
        (inp.onblur = function () {
          if (!inp.value.includes('@')) {
            // not email
            inp.nextElementSibling.innerText = 'to nie email';
          } else {
            inp.nextElementSibling.innerText = '';
          }
        })
    );
  }

Vadliacja na pałę, chodzi mi o przekazanie listenera. Ma to ręce i nogi czy istnieje lepszy sposób ? Żeby złapać jakoś kontener i przekazywać target. Nie wiem, lub coś w tym stylu.

Mając 3 różne inputy po prostu do każdego wyłapałbym z id i zrobił onBlur. Mając 3 takie same jest sens robic nodelista ?

EDIT:

Powyższy przykład nie zadziała przy dynamicznych tworzeniu elementów, np gdy zrenderuje dodatkowe inputy, one listenera już nie otrzymają - chyba że go będę wywoływał co render.
Event z contenera załatwiłby sprawę.

Focusout też rozwiązuje sprawę - ale zastanawia mnie do czego można tego blur użyć. Mając focusIn/Out

Dziękuję z góry za opinie

guzdziac55 napisał(a):

Powyższy przykład nie zadziała przy dynamicznych tworzeniu elementów, np gdy zrenderuje dodatkowe inputy, one listenera już nie otrzymają - chyba że go będę wywoływał co render.

Przecież dopisanie do nowotworzonego elementu funkcji powiązanej z jakąś wykonywaną na nim akcją, to jedna linijka więcej podczas jego deklarowania. Moim zdaniem do prostsza metoda niż kombinowanie z przypisywaniem czegoś do kontenera, a później rozkminianiem, które z jego dzieci wywołało aktualną akcję i na którym z nich wcześniej był fokus.

@Freja Draco: A wypada tak :) ? Uczę się dlatego moje pytanie może wydawać się dziwne. Czyli po prostu stworzyć w klasie metodę w stylu "addlisener" i wywoływać po zrenderowaniu ?

Pytam co mniej boli i po czym nie zostanę zjechany jak ktoś obejrzy kod.

Ja bym tak zrobiła. Jeśli ktoś inny ma jakieś odmienne opinie, to może się wypowie.