Blog webdeveloperski Patryk yarpo Jar

Walidacja formularzy – obsługa zdarzeń

Autor wiadomości Czerwiec 4, 2011

Walidacja danych podanych przez użytkownika w formularzu to nic innego jak sprawdzenie, czy wszystkie wymagane pola zostały wypełnione, a następnie sprawdzenie czy ich wartość ma odpowiednią postać, np. numery telefonów, kod pocztowy, adres e-mail.

Wydaje się to dosyć proste. Jednak kiedy to wywołać?

Potencjalne rozwiązania

Na kliknięcie `submit'

Jest to chyba najprymitywniejszy sposób. Polega na dodaniu obsługi zdarzenia `click' do przycisku `submit':

<html>
<head>
    <title>Walidacja formularza</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
    <form action="#">
        <input type="text" name="example"/>
        <input type="submit" onclick='alert(1)'/>
    </form>
</body>
</html>

Zamiast przypisywać do atrybuty `onclick' alert, możemy przypisać tam obsługę walidacji, np.:

<html>
<head>
    <title>Walidacja formularza</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <script type="text/javascript">
    function validation()
    {
        if (document.getElementById('example').value.length < 3)
        {
            alert('Wpisz co najmniej 3 znaki');
            return false;
        }
        return true;
    }
    </script>
</head>
<body>
    <form action="#">
        <input type="text" name="example" id="example"/>
        <input type="submit" onclick='return validation()'/>
    </form>
</body>
</html>

Co mnie lekko zdziwiło wszystkie nowoczesne przeglądarki zwalidują ten formularz, nawet jeśli zamiast przez kliknięcie myszą na przycisk submit, wyślemy formularz enterem. Mam wrażenie (choć brak mi dowodów), że dawniej tak nie było.

Jak pewnie zauważyłeś funkcja `validation' zwraca `true' albo `false'. Jeśli zwraca `false' formularz nie zostaje wysłany, co można wykorzystać w sytuacji, w której wykryjemy, że podane dane nie są prawidłowe.

Sprawdzanie pól po wypełnieniu

<form action="#">
    <input type="text" name="example" id="example"
        onblur="alert('Walidacja: ' + this)"/>
    <input type="submit" onclick='validation()'/>
</form>

Takie podejście stosowane jest głównie do informowania użytkownika o niepoprawnym wypełnieniu formularza. Zamiast alertu można oczywiście podać tu nazwę funkcji. Pod operatorem `this' mieści się w powyższym kodzie element typu "text" formularza [ten, aktualnie wypełniany]. Zatem można spokojnie dobrać się do jego właściwości `value' i sprawdzić czy jest prawidłowa, np. w taki sposób:

<input type="text" name="example" id="example"
     onblur="if (this.value != 'a') { alert('podaj a!'); }" />

Choć rozsądniej IMO jest zrobić to w osobnej funkcji.

Prócz obsługi zdarzenia `blur' [utrata zaznaczenia] można obsłużyć bardziej wysublimowane zdarzenia, takie jak:

  • `keydown' - przed `keypress' - wciśnięcie klawisza
  • `keypress' - po `keydown', przed `keyup' - wciśnięcie klawisza
  • `keyup' - po `keypress' - puszczenie klawisza
  • `change' - zmiana wartości elementu

W przypadku zdarzenia `keypress' nie są przechwytywane klawisze specjalne, tj. shift czy ctrl. Jeśli zależy Ci na odczytywaniu inforamajci o różnych kombinacjach klawiszy, nie używaj zatem tego zdarzenia.

Kolejność wywołań zdarzeń obsługujących wciskanie klawiszy pokazuje poniższy listing:

<html>
<head>
    <title>Walidacja formularza</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
    <form action="#">
        <input type="text" value="123"
            onkeydown="alert('down:' + this.value)"
            onkeypress="alert('press:' + this.value)"
            onkeyup="alert('up:' + this.value)" />
    </form>
</body>
</html>

Trochę ku mojemu zdziwieniu, okazało się, że żadne ze zdarzeń nie otrzymuje aktualnej wartości. Wszystkie wyświetlają wartość sprzed wciśnięcia klawisza. Jeśli chciałbyś odczytać aktualny stan warto użyć zdarzenia `change':

<input type="text" value="123"
    onkeydown="alert('down:' + this.value)"
    onkeypress="alert('press:' + this.value)"
    onkeyup="alert('up:' + this.value)"
    onchange="alert('change' + this.value)" />

W funkcji obsługi zdarzenia `change' (przypisanej do atrybuty `onchange') zostanie wyświetlona aktualna wartość. Zdarzenie `change' występuje także w innych typach elementów formularza - menu rozwijanych, checkboksach, radio itd.

Zdarzenie submit

Przypisanie do znacznika <form/> obsługi zdarzenia `submit' poprzez atrybut `onsubmit'. Walidacja zostanie przeprowadzona po zatwierdzeniu formularza, ale przed jego wysłanie. Tak jak to było w opisanym wyżej przypadku zdarzenia `click' dla przycisku typu `submit'.

<html>
<head>
<title>Walidacja formularza</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <script type="text/javascript">
    function validation()
    {
        if (document.getElementById('example').value.length < 3)
        {
            alert('Wpisz co najmniej 3 znaki');
            return false;
        }
        return true;
    }
    </script>
</head>
<body>
    <form action="#" onsubmit="return validation()">
        <input type="text" name="example" id="example"/>
        <input type="submit" />
    </form>
</body>
</html>

Co dalej?

Przedstawione tu rozwiązania są jedynie wstępem do właściwej walidacji. Więcej o walidacji przeczytać można w następujących artykułach:

Komentarze (0) Trackbacks (0)

Brak komentarzy.


Leave a comment

 

Brak trackbacków.