Walidacja formularza

Question

Witam,

Mam pytanie jak zrobić dobrą walidację formularza w  javasript?

Answer 1

Nie zgodzę się z tym, że najlepiej jest wykorzystać natywną walidację, bo ta jest od zawsze totalnie zepsuta i w dużej mierze niedostępna. Jeśli chcemy coś, co będzie równocześnie przyjazne użytkownikowi oraz dostępne, to trzeba mimo wszystko zrobić to samemu. W3C i gov.uk mają naprawdę fajne materiały na ten temat.

Osobiście stosowałbym natywną walidację w HTML jako ostateczną "linię obrony", gdyby JS z niestandardową walidacją z jakiejś przyczyny nie działał. Jednak jeśli będzie działać, to po prostu dodaję [novalidate] do formularza i używam istniejących atrybutów ([required], [type] itd.) do zaserwowania własnej walidacji. Część bibliotek wspiera takie rozwiązanie.

Comments

"Jeśli chcemy coś, co będzie równocześnie przyjazne użytkownikowi oraz dostępne, to trzeba mimo wszystko zrobić to samemu. " dokladnie tak. Ba! Nie jest to takie proste, np walidacja maila wyglada tak:

http://www.ex-parrot.com/%7Epdw/Mail-RFC822-Address.html

Jak chcesz mu ladnie wyswietlic gdzie jest blad, to czeka Cie wyklepanie czegos takie samemu :) Juz nie wspominam o testach, seqiurze, ani laczeniu takich sprawdzen. A zalozenia, ze user ma zawsze wlaczony pelny JS, to tez tak z tym ronie bywa :)

Answer 2

Moim zdaniem nie warto za bardzo się skupiać na walidacji formularza za pomocą javascript-u, bo za pomocą devtools-a wbudowanego chyba już w każdą przeglądarkę można łatwo "obejść" taką walidację,

Front-end validation (javascript) can easily be bypassed. It should only be used to improve the "user experience" - by providing instant feedback

lepiej jest wykonać walidację w backend-dzie, jedyne co mogę polecić po stronie przeglądarki to użycie natywnej walidacji za pomocą atrybutów "wbudowanych" w elementy html (głównie <input>) używane w <form> np.:

• required
• pattern  itp.

oraz użyć odpowiednich typów <input> dla danych, które chcemy "pobrać" za pomocą formularza dla np.:

• hasło -  <input type="password">
• email -  <input type="email">
•    link -  <input type="url"> itd.

 

---

[ EDIT ]

 Front-end validation (javascript) can easily be bypassed. It should only be used to improve the "user experience" - by providing instant feedback

Comments

Moim zdaniem nie warto za bardzo się skupiać na walidacji formularza za pomocą javascript-u, bo za pomocą devtools-a wbudowanego chyba już w każdą przeglądarkę można łatwo "obejść" taką walidację,

IMO pomijasz tutaj dość ważny aspekt: walidacja po stronie klienta nie ma służyć bezpieczeństwu, tylko podniesieniu UX. Usera nie obchodzi to, co dzieje się na backendzie, bo nie wchodzi z tym w interakcję. Wchodzi w interakcję z formularzem w przeglądarce i jeśli walidacja nie będzie przyjazna, zapewne nawet nie dokończy wypełniać formularza.

---

Jest w cytacie wzmianka o tym