Validacja Form Input // keypress // wiele inputów

0

Witam,
Mam forma i walidacje do niego którą postanowiłem przerobić - aktualnie walidacja następowała po submicie w funkcji asynchronicznej i robiła Throw.
Przerobiłem tą walidację na bardziej dynamiczną i bardziej ui/ux. Użytkownik dostaje informację o błędnym inpucie podczas jego wprowadzania.

Mamy funkcje keypress która ma listener na inpucie ( listener właśnie keypress ). Funkcja wyrzuca value-input do drugiej funkcji sprawdzającej.
Druga funkcja sprawa ją, czy input składa się z 3 wyrazów oddzielonych przecinkiem - mogą zawierać spację.
Jeśli warunek nie spełniony to wypluwa false - prosty error w formie <spana> oraz robi btn subbmit na hidden.

Problem w tym ze takich inputów w divie mam 5. Wiadomo kazdy ma inny name, pod label żeby później móc to jakoś zapakować i wysłać przez API - i ogólnie rozdzielić dane.

Przypisywanie 5 x tej samej funkcji do 5 inputów średnio mi się widzi jako dobre rozwiązanie.

Chciałbym nasłuchiwać wszystkie - wszystkie mają mieć tą samą walidację.

Nie wiem czy ma to znaczenie ale:
-mam je w osobnym divie, wiem że mógłbym je wyciągnąć przez querryselectorall =>> ('input[type=text]') -- czy dobrze myślę ? - u mnie jednak to nie działa chyba że coś źle robię.

  • natomiast i tak byłby problem z error spanem bo kazdy input ma swój. - ale mógłbym zrobic wspólny albo kombinować coś z child elementem.

Co w takim przypadku zrobić ? Istnieje jakiś lepszy sposób?
Gdybym miał różne walidacje, to nie miałbym skrupułów i wywoływałbym różnymi funkcjami.

Prosiłbym o wskazówkę, ostatnio proste nakierowanie ze statem bardzo mi pomogło. Walczyłem z tym już dłuższy czas, ale brakuje mi doświadczenia w podjęciu decyzji.

Pozdrawiam serdecznie

1

@guzdziac55:

Możesz nasłuchiwać eventu na rodzicu i w zależności jaki jest event.target wyświetlić walidacje w odpowiednim miejscu.

Nie wiem też dlaczego używasz keypress, ten event chyba wyleciał już ze specyfikacji. Lepiej użyj eventu input.

Na przykład tak:

<div id="container">
  <div>
    <label for="name">Input 1</label>
    <input type="text" id="input1" name="input1">
    <p></p>
  </div>
  <div>
    <label for="name">Input 2</label>
    <input type="text" id="input2" name="input2">
    <p></p>
  </div>
</div>
const container = document.getElementById('container');
container.addEventListener('input', (event) => {
	const target = event.target;
	const value = target.value;
    const p = target.nextElementSibling;
	if (value.length > 0) {
  	    p.innerText = `Co ty piszesz człowieku, jakie ${value}?`
    } else {
  	    p.innerText = '';
    }
})

Tutaj działający kod (demo)

0

@m31: jeszcze nie sprawdzałem, ale od razu podziękuję za szybką odpowiedź. Widziałem gdzieś rozwiązanie z siblings, ale bardzo rzadko go używałem wcześniej i chyba na stacku go dobrze nie zrozumiałem. Przetestuję jak się to sprawdzi.

keypress rzucił mi się w oczy przez wyplusowany wątek na stacku, data bodajże 2018 - 2019, z tym że znalazłem już mały problem w nim u siebie w projekcie.

Odchodząc minimalnie od tematu, bo korzystam z różnych źródeł wiedzi ale brak mi doświadczenia.
Jest jakaś strona która mówi o aktualnie używanych zestawieniach funkcji, czy to wbudowanych - np podzielonych na kategorie. Coś w stylu gdzie widać jaka metoda / funkcja zastąpiła wcześniejszą.

Czy trzeba szukać na sprawdzonych stronach typu csstricks czy coś w tym stylu ?

0

@guzdziac55: Update: fajnie działa ten event, trzeba pamiętać o strukturyzacja, ale pozbyłem się przypisywania paragrafów z errorem do querySelectorów. Dziękuję za pomoc.

Jeszcze dodatkowe pytanie może ktoś da wskazówkę. W modelu MVC standardem jest oddzielanie jeśli tylko to mozliwe warstw apikacji. Validacja wywołuje event na inpucie w View, ale już jako sama Validacja poowinna być w osobnym module ? Gdzie zazwyczaj przechowuje się Validację, w jakiś helperfunctions ?

0

Główne źródło wiedzy i w zasadzie "dokumentacja sieci" to MDN, kiedy wejdziesz na przykład na opis eventu keypress, to masz tam wielgachny czerwony panel zniechęcający do jego używania (co nie znaczy że keypress zniknie wkrótce z przeglądarek).

Co do podzielenia funkcjonalności, to nie potrafię odpowiedzieć. Ma być tam gdzie ma najwięcej sensu :). Ogólnie zwykle warto rozdzielać warstwy aplikacji, ale jeśli masz tylko jakiś jeden mały komponent, to nie trzeba na siłę udziwniać.
Ma być tak, żeby było czytelnie i działało :).

1 użytkowników online, w tym zalogowanych: 0, gości: 1