Walidacja formularza w js

Question

Hej

Chcialem stworzyć walidację formularza kktóry sprawdza inputy z tą samą klasą i każdemu który jest invalid przypisuje message pod inputem. Niestety nie wiem jak sie do tego zabrać. Proszę o pomoc

mój kod:

function validation() {

var form = document.querySelector("#myForm"),

 fields = form.querySelectorAll(".item");

for(var i = 0; i < fields.length; i++) {

var field = fields[i];

if(field.value == "") {

return false;

}{

return true;

}

Comments

Zacząłbym od zapoznania się z tym (oczywiście jeden z wielu kursów), a potem samemu coś zdziałać i ewentualnie, przy kłopotach, dalej szukać pomocy na forum :)

---

pssstt HTML5 ma walidacje formularzy bez JSa ;) 

http://www.fanaticalcode.com/blog/nowe-podejscie-do-walidacji-formularzy-w-html5/

---

pssstt HTML5 ma walidacje formularzy bez JSa ;) 

Teoretycznie tak, ale nie możemy za bardzo ingerować w wygląd tych komunikatów z przeglądarki więc nie w każdym layoucie się to sprawdzi. Brakiem JS bym się nie przejmował ponieważ przecież i tak zawsze robi się walidację serwerową, a kliencka to tylko pewna wygoda dla użytkownika.

---

@Tomek Sochacki Możemy przechwycić event i ostylować po swojemu ;)

Dodatkowo mamy kilka innych plusów.
- brak problemów z z-indeksami komunikatów
- automatyczny focus inputa
- automatyczne scrolowanie do niepoprawnego inputa
- zmiana zachowania inputów np. w polu type="url" przeglądarka podpowiada tylko adresy stron czy tez w telefonach pokazuje się klawiatura numeryczna jeśli podamy typ tel.
- komunikaty w języku przeglądarki usera. Dopisujemy jeden atrybut i mamy walidacje w wszystkich językach świata jak dla mnie jest to potęga.
- możliwość przechwycenia eventu i stworzenia własnych komunikatów.

 

---

Szczerze mówiąc nie korzystam za bardzo z walidacji html5 właśnie ze względu na ograniczenia w stylowaniu tych komunikatów, ale skoro już jest to rozszerzone to chętnie przyjrzę się temu bliżej :)

Komunikaty wielojęzykowe to faktycznie zaleta, niewątpliwie.

Co do tego zachowania się na inputy tel, email itp. to akurat nie ma to związku z walidacją. Na przykład dasz typ email to domyślnie mobilki dadzą przycisk małpki, ale walidacja to zupełnie oddzielny temat (de facto dla e-maili dość nieciekawa.. ale to inna sprawa).

Jak już jesteśmy przy walidacji html5 to warto też wspomnieć, że można dać zupełnie dowolne reguły z użyciem regexp, wystarczy dodać atrybut pattern i po sprawie (granice początku i końca ciągu są dodawane automatycznie). To daje potężne możliwości...

Answer 1

Ale nie podałeś co chcesz dokładnie zwalidować :) Chodzi Ci o sprawdzenie czy w inputach user podał jakiś określony ciąg znaków, liczbę, czy nie jest pusty itp.? Napisz jakie walidacje chcesz zrobić to pomożemy dobrać rozwiązanie.

Comments

Przepraszam nie wyraziłem się jasno. Mam kilka inputów z klasą item i sprawdzam czy są puste jeśli tak to pod każdym wyświetla message informującym o pustym polu.

mój kod:

function validation() {

var form = document.querySelector("#myForm"),

 fields = form.querySelectorAll(".item");

for(var i = 0; i < fields.length; i++) {

var field = fields[i];

if(field.value == "") {

return false;

}{

return true;

}

---

Jeśli tak, to Twój kod ma złe już same założenia, ponieważ zwracasz true/false w zależności od spełniania warunku. W tym momencie iteracja zakończy się na pierwszym inpucie, niezależnie od jego wartości i po prostu zwróci boolean.

Ty natomiast z tego co piszesz to po prostu chcesz obok pustych inputów wstawić informację o tym. Masz kilka sposobów. Możesz np. przy każdym inpucie dodać pole z informacją o błędzie (braku wartości) i początkowo je ukryć, a potem w JS odpowiednio włączać widoczność. Może to być np. na zdarzeniu sumbit formularza, input/change poszczególnych inputów itp. (nie napisałeś kiedy walidujesz i co dalej robisz z danymi).

I wtedy kolejno przelecieć wszystkie inputy np. poprzez metodę forEach() i odpowiednio je pokazywać/ukrywać w zależności od np. 

if( !field.length ) {
    //ukryj gdy pole puste
}
else {
    //pokaż gdy wypełnione
}

Staraj się też unikać operatora "==", szczególnie podczas walidacji. Lepiej stosować operator identyczności "===" albo w tym wypadku po prostu polegać na niejawnej konwersji do boolean, ponieważ pusty ciąg "" zostanie zamieniony na false.

Do tego możesz stworzyć jakąś zmienną, która w przypadku napotkania pierwszego pustego ciągu dostałaby wartość false.

Na koniec sprawdzasz czy ta zmienna jest true, i tylko wtedy wysyłasz forma na serwer, inaczej wstrzymujesz wysłanie (e.preventDefault()).

Answer 2

Jeżeli nie znasz js lub jq to się go zacznij uczyć od podstaw. A jeżeli potrzebujesz wtyczki do poprostu poszukaj jquery plugin validation form

Answer 3

Sama walidacja JS'em na nic się nie zda jeżeli nie będzie walidacji po stronie serwera