JavaScript: użycie Constraints Validation czyli fajne dymki na polach

Nie jestem programistą JavaScript, ale jestem programistą, a od paru lat etatowo pracuję przy projektach w PHP, więc co i rusz zdarza się napisać kilka linii kodu w JS. Od pewnego czasu, pracuję przy projekcie w Symfony 2, gdzie w widokach w rosnącej skali wykorzystywany jest Bootstrap. Stopniowo implementujemy też walidację po stronie klienta, dlatego dziś mały post o walidacji przy pomocy ograniczeń, czyli Constraints Validation.

Użytkownicy nowszych przeglądarek znają Constraints Validation już od pewnego czasu jako 'dymki', które automatycznie towarzyszą wymaganym polom w formularzu. Skoro więc już część z nich się z nimi na pewno opatrzyła, warto z tego skorzystać i dodać tam nieco od siebie. W końcu wiele z walidacji można wykonać po stronie frontendu w JS, a część niezauważalnie przekazać do backandu poprzez Ajax. Mechanizm Constraints Validation to potrafi.

Typowa walidacja wymagalności

No dobra, może nieco przesadziłem, choć tylko w drugiej części. Bazowo mechanizm pozwala na walidację pól na podstawie ich atrybutów, a w szczególności typu, maksymalnej długości, wzorca, a dla paru pól również wartości maksymalnej i minimalnej. Jeśli chcemy wykonać bardziej złożoną walidację, możemy skorzystać ze zdarzeń. To jest właśnie ta druga część. W zdarzeniu onChange możemy odwołać się do backendu poprzez Ajax i po prostu tam przekazać walidację.

Od razu przejdźmy do części drugiej, bo pierwsza nie jest zbyt interesująca skoro obsługiwana automatycznie przez przeglądarki. W drugiej części warto wiedzieć, że walidacja wykonana może być praktycznie w dowolnym momencie, ale jej prezentacja, to nieco odrębna kwestia. Sugestywne dymki są prezentowane dopiero przy próbie wysłania formularza. Jeśli jednak chcemy jakoś zaznaczyć niepoprawne pola, mamy do dyspozycji pseudoklasy css :valid i :invalid.

Poniżej zamieszczam krótki, nieco zbędny kod prezentujący ideę walidacji pola w JS. W listenerze zdarzenia change możemy równie dobrze uruchomić walidację NIP, PESEL, REGON czy numeru dowodu. To tutaj, to tylko wskazanie gdzie to robić.

HTML:

<form method="POST">
  <input id="test-input" required="required" type="text" />
  <input type="submit" value="Zapisz" />
</form>

JS:

document.getElementById('test-input').addEventListener('change', function(event) {
 if(event.target.value.length > 3) {
   event.target.setCustomValidity('Pole nie może być dłuższe niż 3');
  } else {
   event.target.setCustomValidity('');
  }
});

Wynik po wysłaniu:

Jak już wspominałem, wynik nie będzie widoczny od razu, ale dopiero po próbie wysłania formularza. Jeśli skorzystamy z CSS, możemy na przykład oznaczyć pole jak na ostatnim obrazku.
CSS:

#test-input:valid {
  border: #00ff00 1px solid;
}

#test-input:invalid {
  border: #a30000 1px solid;
}

Wynik: