Prosta walidacja formularza za pomocą skryptu JavaScript

JS - podstawy Zostaw komentarz

Podczas wypełniania formularza (np. formularz kontaktowy, formularz zamówienia, formularz rejestracyjny) zachodzi potrzeba sprawdzenia poprawności wprowadzonych danych. Najprościej jest przeprowadzić walidację na poziomie skryptu PHP (czyli gdy przechwytujemy dane wpisane w formularzu to tuż przed dodaniem rekordu do bazy danych sprawdzamy, czy wszystkie pola zostały wypełnione i czy wprowadzone dane mają poprawny format (np. czy adres e-mail ma prawidłowy format, czy oba hasła się pokrywają, czy kod pocztowy jest w formacie ab-cde itp.) Jeśli dane są błędne to zamiast wykonać oczekiwaną akcję należy ponownie załadować formularz i zwrócić stosowny komunikat błędu).

Jednak walidacja na poziomie skryptu PHP ma pewną wadę: użytkownik musi poczekać, aż strona internetowa się przeładuje, zanim się dowie, że w polu nazwisko nic nie wpisał. Dużo wygodniej jest wprowadzić walidację poprzez dodanie prostego skryptu w języku JavaScript, który jeszcze przed wysłaniem formularza „z grubsza” sprawdzi, czy wszystko jest w porządku (np. sprawdzi, czy wszystkie obowiązkowe pola zostały wypełnione). Poniżej przedstawiam przykładowy formularz z odpowiednim kodem JavaScript odpowiedzialnym za walidację danych.

<script>
// Funkcja pobrana ze strony
// http://www.white-hat-web-design.co.uk/articles/js-validation.php
function ValidateEmail(address)
{
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
if(reg.test(address) == false) {
return false;
}
else
{
return true;
}
}function kodp(kp)
{
var dl=kp.length;
var wynik=true;
var q='';if (dl!=6) return false;
for(a=0; a<dl; a++)
{
q=kp.charAt(a);
if (a!=2)
{
y=q.charCodeAt(0);
if (y<48 || y>57) wynik=false;
}
else
{
if (q!='-') wynik=false;
}
}
return wynik;
}
function validateForm(AForm)
{
var tekst='';
if (AForm.imie.value==""){
tekst=tekst+"Wpisz swoje imię\n";
}
if (!kodp(AForm.kod.value)){
tekst=tekst+"Nieprawidłowy format kodu pocztowego\n";
}
if (!ValidateEmail(AForm.email.value))
{
tekst=tekst+"Nieprawidłowy format adresu e-mail\n";
}
if (tekst!="") {
alert ("WYSTAPIŁY NASTĘPUJĄCE BŁĘDY\n"+tekst);
return false;
} else {
return true;
}
}
</script>
<form action="next.php" method="POST" onsubmit="return validateForm(this);">
<p>Imię <input type="text" name="imie"></p>
<p>E-mail <input type="text" name="email"></p>
<p>Kod pocztowy <input type="text" name="kod"></p>
<p><input type="submit" name="B1" value="Dalej">
</form>

Pobierz kod (2 KB)

W skrócie: w kodzie formularza pojawia się wywołanie funkcji validateForm(this). Funkcja ta zwraca wartość true jeśli wszystko jest w porządku. Jeśli natomiast formularz został błędnie wypełniony, to owa funkcja zwraca wartość false w związku z czym przeglądarka internetowa „nie wyśle formularza„. Jeśli zostanie wyłączona obsługa JavaScript, to formularz jak najbardziej zostanie wysłany.

Zwróć uwagę na następujące funkcje: funkcja validateForm to główna funkcja, która sprawdza wszystkie pola formularza. Jeśli coś jest nie tak, to do zmiennej tekst dodajemy informację o rodzaju napotkanego błędu. Gdy zmienna tekst jest pusta, to funkcja zwraca wartość true. Gdy zmienna tekst nie jest pusta to zostaje wyświtelony komunikat błędu i funkcja zwraca wartość false. Dodatkowo znajdują się dwie funkcje pomocnicze wywoływane przez naszą główną funkcję: jedna sprawdza poprawność adresu e-mail, a druga sprawdza, czy dany ciąg znaków to kod pocztowy w formacie ab-cde (funkcja nie jest może jakoś optymalnie napisana, ale nie znam na tyle mocno JavaScript, aby bawić się w wyrażenia regularne)

Uwaga: wprowadzenie walidacji JavaScript nie zwalnia z obowiązku wprowadzenia procedur w języku skryptowym PHP, które sprawdzają, czy formularz został wypełniony. Być może wydaje się to Tobie głupie, że dwa razy piszesz ten sam kod, ale czasami użytkownik może wyłączyć w przeglądarce internetowej obsługę skryptów JavaScript i wtedy mógłby „przejść” błędnie wypełniony formularz!)

Tagi: , , , ,

Zanim dodasz komentarz, zapoznaj się z kilkoma podstawowymi zasadami:

  1. Jeśli zamiast imienia (lub pseudonimu) wpiszesz jakiś mało logiczny ciąg znaków np. asdfg, to taki komentarz zostanie usunięty.
  2. Jeśli się za kogoś podszywasz, to taki komentarz zostanie usunęty
  3. Jeśli zamiast imienia (pseudonimu) wpiszesz jakieś słowo kluczowe (np. tani hosting), to taki komentarz zostanie usunięty
  4. Jeśli Twoim jedynym celem jest zareklamowanie się, to taki komentarz zostanie niezwłocznie usunięty
  5. Komentarze nie związane z tematem notki są kasowane.
  6. Komentarze, które zawierają wulgarne słowa, bądź są obraźliwe (nie dotyczy konstruktywnej krytyki) są kasowane.
  7. Komentarze z mailem typu "nie.podam@coś.tam.pl" są kasowane
  8. Komentarze pisane niechlujnie (bez interpunkcji, w błędami ortograficznymi, z licznymi literówkami, pisane WIELKIMI LITERAMI) są kasowane

3 komentarze do “Prosta walidacja formularza za pomocą skryptu JavaScript”

  1. Patryk yarpo Jar Says:

    A dlaczegop tego nie zautomatyzować i nie używać jedynie odpowiednio sparametryzowanego kodu JS do każdego formularza?
    http://www.yarpo.pl/2011/06/05/automatyczna-walidacja-formularzy/

  2. Patryk yarpo Jar Says:

    Dla wygody użytkownika zawsze warto jest sprawdzić poprawność wypełnionego formularza jeszcze na kliencie. Jednak dla wygody programisty lepiej jest używać bardziej uniwersalnych narzędzi do walidacji.

    W HTML5 walidacja formularzy będzie wspierana natywnie. Póki co jednak trzeba sobie radzić inaczej. Jest wiele wtyczek jQuery pozwalających robić to całkiem sprawnie.

    Jeśli ktoś jednak nie przepada za jQuery, zawsze można znaleźć coś mniejszego, np.:
    http://www.yarpo.pl/2011/06/05/automatyczna-walidacja-formularzy/

  3. Marcin Says:

    Chcialbym podziekowac za powyzszy skrypt.Napisany zwiezle,konkretnie i najwazniejsze ze dziala.Nie ukrywam ze zastosowalem go na swojej witrynie http://www.WakacjeSzczyrk.pl i polecam wszystkim ktorym brakuje takiej walidacji w swoich formularzach.Pozdrawiam

Zostaw komentarz

WordPress - Hosting: Twój hosting - Skórka: N.Design Studio - Spolszczenie: Adam Klimowski.
RSS wpisów RSS komentarzy Zaloguj się