Praktyczne wprowadzenie do JavaScript #9

Stworzyliśmy już rozwijane menu. Pora teraz na zabawę z formularzami. Przez kilka następnych odcinków, napiszemy dość zaawansowaną ich walidację, wykorzystamy ciasteczka (cookies) do zapamiętywania wartości formularza (pomocne np. w przypadku komentarzy na stronie). Do dzieła!

Ogólnie rzecz biorąc sprawa wygląda następująco: mamy niepozorny formularz z polami na wpisanie nicka (<input type=”text”>) oraz treści, dajmy na to, komentarza na stronę (<textarea>). Naszym zadaniem jest sprawdzenie, po wciśnięciu przez użytkownika przycisku dodaj, czy wartości poszczególnych pól są prawidłowe. Najpierw postaramy się sprawdzić, czy cokolwiek zostało w nie wpisane. Jeśli jakiś element formularza będzie pusty, zablokujemy wysyłanie formularza i wyróżnimy czerwoną obwódką (borderem) pole, w którym skrypt napotka błąd.

Stwórzmy najpierw przykładowy dokument HTML, który zobrazuje nam zagadnienie, z jakim dzisiaj nam przyjdzie pracować:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
<head>
<title>Strona z formularzem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />

<style type="text/css">

label
{
	display: block;
	margin: 2px;
}

</style>

<!-- Nasz kod Javascript: -->

<script type="text/javascript">

</script>

</head>
<body>
	<form method="post" action="" name="dodawanie_posta">
			<label>Nick: <input type="text" name="nick" value="" /></label>
			<label>Tresc <textarea name="content" rows="5" cols="20"></textarea></label>
			<input type="submit" value="dodaj" />
		</form>
</body>
</html>

Jak widać, nie ma tutaj żadnych udziwnień. Dwa pola, przycisk submit i żadnej, zbędnej filozofii. Cały formularz zaś, jak widać, nazwany jest dodawanie_posta. Mamy już teoretyczne podstawy, pora przejść do praktyki.

Powiedzieliśmy sobie, że chcemy sprawdzić, czy użytkownik wprowadził poprawne dane po wciśnięciu przycisku submit. Oczywiście dysponując samym CSS’em i HTML’em nie jesteśmy w stanie tego zrobić. Na szczęście z pomocą przychodzi nam kolejne zdarzenie JavaScript. Zapewne pamiętacie, jak wykrywaliśmy, czy użytkownik najechał kursorem na dany element (onmouseover) lub czy kliknął go (onclick). Podobnie zrobimy z naszym formularzem. Wychwycimy moment, kiedy użytkownik wyśle formularz poprzez przycisk dodaj. Pomoże nam w tym zdarzenie onsubmit.

onsubmit
to zdarzenie charakterystyczne dla formularzy, pozwalające wykryć po stronie przeglądarki moment, kiedy dany formularz jest wysyłany.

Jako że od kilku już odcinków nie używamy zdarzeń w ciele tagów HTML, zbudujmy funkcję Laduj, która po załadowaniu dokumentu sprawi, że nasz formularz będzie miał ustawioną właściwość onsubmit odsyłającą do jakieś funkcji, dajmy na to Verify.


<!-- Nasz kod Javascript: -->

<script type="text/javascript">

window.onload = Laduj;

function Laduj()
{
	
}

function Verify()
{

}

</script>
var formularz = document.forms[‚name_formularza’];
Dzięki powyższej konstrukcji, możemy dostać się do określonego formularza i jego pól. Pomiędzy nawiasami kwadratowymi możemy wpisać wartość atrybutu name interesującego nas formularza. Jak widać, mamy do czynienia z kolejnym przykładem rodzica i dziecka. Rodzicem jest cały dokument HTML (document), a dzieckiem formularze (.forms).

Warto dodać, że do określonego formularza możemy się również dostać, wpisując w nawiasy kwadratowe numer porządkowy formularza. Jeśli formularz, który jest przedmiotem naszego zainteresowania występuje w dokumencie jako pierwszy spośród innych formularzy, to możemy zastosować zapis document.forms[0]. Zero pojawia się tutaj, ponieważ w informatyce liczymy od zera, co wiemy już z poprzednich odcinków.

W ten sposób nakazaliśmy, aby za każdym wywołaniem strony, na początku wykonała się funkcja Laduj. Tego typu konstrukcje poznaliśmy już kilka odcinków wcześniej. Skupmy się natomiast na aktualnym problemie. Funkcja Laduj musi dać znać formularzowi, że po jego wysłaniu ma wykonać się funkcja Verify, sprawdzająca poprawność wpisanych danych. Problem w tym, jak dostać się do formularza, kiedy nie mamy jego id(wtedy użylibyśmy document.getElementById(), ale tutaj, umyślnie, nie chcemy tego). Na to też jest sposób!

Należy odwołać się do całego dokumentu i jego potencjalnych dzieci. Jak pamiętamy, możliwe było użycie czegoś takiego: document.body, więc dlaczego nie użyć podobnej konstrukcji w przypadku formularzy?


function Laduj()
{
	document.forms['dodawanie_posta'].onsubmit = Verify;
}

W ten sposób, zamiast używać identyfikatora naszego formularza, skorzystaliśmy z jego atrybutu name o wartości dodawanie_posta. Dla pewności, że otrzymaliśmy odnośnik do prawidłowego formularza, możemy sprawdzić jego poszczególne właściwości i wyświetlić je w alert(); Na przykład:


function Laduj()
{
	alert(document.forms['dodawanie_posta'].method);
	alert(document.forms['dodawanie_posta'].name);
}

Po załadowaniu całej strony, powyższym sposobem wyświetlą nam się atrybuty method i name. Czyż to nie wspaniałe?

Wracając do naszego przykładu, należy teraz zdefiniować, co będzie robić funkcja Verify, która wywoływana jest po wciśnięciu dodaj. Otóż najpierw powinna ona pobrać wartości wszystkich pól. Następnie musimy sprawdzić, czy wartości te są niepuste. Jeśli będzie inaczej, ustawiamy style.border = „2px solid #FF0000”; elementowi formularza, który nie został wypełniony. Można też wyświetlić okienko informacyjne alert(); o tym, że to i owo nie zostało wpisane.


function Verify()
{
	var nick = document.forms['dodawanie_posta'].nick.value;
	var content = document.forms['dodawanie_posta'].content.value;
	var error = false;

Tak rozpoczynać się będzie nasza funkcja. Zmienna nick pobiera wartość pola input o name=”nick”. Ze zmienną content jest podobnie, tyle że jej wartość pobierana jest z textarea o name=”content”. Zmienna error ma wartość false, co oznacza fałsz, jak łatwo się domyślić. Jej wartość zostanie zmieniona na prawdę (true), kiedy nasz skrypt napotka jakieś puste pole formularza. Zmienna ta jest nam potrzebna, by określić, czy trzeba zatrzymywać wysyłanie formularza, czy też nie. Innymi słowy, przechowuje ona informację o napotkanych błędach. Równie dobrze można by napisać: var error = 0; i, w razie błędu, zmienić tę wartość na 1. To bez znaczenia, choć pierwszy sposób uczy dobrych, programistycznych nawyków. Zostańmy więc przy tym.

Jeśli pobraliśmy już to, co użytkownik wpisał do formularza, pora to sprawdzić. Zobaczmy, czy wartość pola nick jest pusta, czy też nie:


	if (nick == "")
	{
		document.forms['dodawanie_posta'].nick.style.border = "2px solid #FF0000";
		alert('Nie wypełniłeś pola z nickiem!');
		error = true;
		
	}

Jak widać, konstrukcja if pozwala sprawdzić, czy zmienna nick jest pusta. Świadczą o tym dwa apostrofy. Jeśli chcemy osądzić, czy jakąś zmienna jest pusta, to używamy do porównywania właśnie apostrofów bez treści między nimi. Logiczne.

Jeśli warunek if będzie prawdziwy (czyli użytkownik nie wpisze nic w pole nick) to wykonujemy kod w klamrach. Jak wiadomo, odwołując się do danego pola formularza, możemy w łatwy sposób pobrać jego wiele właściwości, w tym style. Korzystamy więc z tego udogodnienia i zmieniamy border dla pola o name=”nick” na „2px solid #FF0000”;. W ten sposób pole te otrzyma czerwoną ramkę, świadczącą o błędzie. Następnie wyświetlamy okienko alert, informujące nas o błędzie. Kończymy ustawiając wartość zmiennej error na true, zaznaczając tym samym, że użytkownik, mówiąc kolokwialnie, spieprzył sprawę i tym samym pojawił się błąd.

Podobnie sprawdzamy tekst wpisany w textarea o nazwie content:


	if (content == "")
	{
		document.forms['dodawanie_posta'].content.style.border = "2px solid #FF0000";
		alert('Nie wypełniłeś pola z treścią!');
		error = true;
	}

Pozostaje nam tylko sprawdzić, czy podczas wykonywania warunków if skrypt zasygnalizował błąd i potrzebne jest zatrzymanie wysyłania formularza.


	if (error)
	{
		return false;
	}
return wartosc;
użycie powyższej konstrukcji sprawia zatrzymanie wykonywania skryptu od momentu jej wystąpienia. Słownie tłumaczymy to jak: zwróć wartość.

return true; – w skrócie: zwróć prawdę
return false; – w skrócie: zwróć nieprawdę

return używamy tylko w ciele funkcji!

W skrócie: jeśli zmienna error będzie prawdą (czyli jej wartość będzie równa true), zwróć (return) fałsz (false). Tym samym wszystkie akcje zostaną zatrzymane, w tym wysyłanie formularza. Gdybyśmy zwrócili true, przeglądarka odebrałaby to tak, jakby wszystko poszło ok.

Spójrzmy teraz na nasz cały dokument:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
<head>
<title>Strona z formularzem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />

<style type="text/css">

label
{
	display: block;
	margin: 2px;
}

</style>

<!-- Nasz kod Javascript: -->

<script type="text/javascript">
window.onload = Laduj;

function Laduj()
{
	document.forms['dodawanie_posta'].onsubmit = Verify;
}
	
function Verify()
{
	var nick = document.forms['dodawanie_posta'].nick.value;
	var content = document.forms['dodawanie_posta'].content.value;
	var error = false;
	
	if (nick == "")
	{
		document.forms['dodawanie_posta'].nick.style.border = "2px solid #FF0000";
		alert('Nie wypełniłeś pola z nickiem!');
		error = true;
		
	}
	if (content == "")
	{
		document.forms['dodawanie_posta'].content.style.border = "2px solid #FF0000";
		alert('Nie wypełniłeś pola z treścią!');
		error = true;
	}

	if (error)
	{
		return false;
	}

	
}
</script>

</head>
<body>
	<form method="post" action="" name="dodawanie_posta">
			<label>Nick: <input type="text" name="nick" value="" /></label>
			<label>Tresc <textarea name="content" rows="5" cols="20"></textarea></label>
			<input type="submit" value="dodaj" />
		</form>
</body>
</html>

Warto jeszcze na chwilkę przyjrzeć się wartościom true i false i ich użyciem.


	var a = true;
	var b = false;

	if (a)
	{
		alert("tak, to prawda");
	}
	if(!b)
	{
		alert("nie, to nie jest prawda");
	}

Równie dobrze można by to zapisać tak:


	var a = true;
	var b = false;

	if (a == true)
	{
		alert("tak, to prawda");
	}
	if(b == false)
	{
		alert("nie, to nie jest prawda");
	}

Co do niezwykłej właściwości return. Spójrzmy na powyższy przykład:


	function Blabla()
	{
		alert('1');
		return false;
		alert('2');
	}
	Blabla();

Definiujemy najpierw funkcję o nazwie Blabla, która pokaże okienko o treści 1. Dalej już niestety nic się nie stanie, bowiem return false; zatrzymuje działanie funkcji. Tak więc działania alert(‚2’); nie ujrzymy.

Wiedzcie też, że nie tylko zmienna może zwracać wartości false lub true. Może to również robić zwykła funkcja:


	function Blabla()
	{
		return false;
	}
	
	function Lalala()
	{
		if (!Blabla())
		{
			alert('Funkcja Blabla zwróciła nieprawdę!');
		}
	}

	Lalala();

Wywołujemy (Lalala();), jak widać, funkcję Lalala. Ta z kolei bada (if (!Blabla())), czy funkcja Blabla zwraca fałsz. I rzeczywiście zwraca, bo w jej ciele zapisaliśmy return false;. W tej sytuacji wykonuje się kod w klamrach, czyli nasz kochany alert();.

Co więcej, możemy przypisać zwracaną wartość funkcji do zmiennej:


	function Blabla()
	{
		return false;
	}
	
	function Lalala()
	{
		var zmienna = Blabla();

		if (!zmienna)
		{
			alert('Funkcja Blabla zwróciła nieprawdę!');
		}
	}
	Lalala();

W ten sposób do zmiennej o nazwie zmienna przypisaliśmy zwracaną wartość funkcji Blabla. Dalej po prostu podstawiamy ją do if.


Walidacja formularza jest na razie mało efektywna. Nie mamy cookiesów, a border inputów zostaje niezmiennie pokolorowany, mimo braku błędów. Tym problemem zajmiemy się już wkrótce.

Komentarze

1

Oo coś nowego, powiązane artykuły ;)
A co do kursu to koleś trzymaj tak dalej, masz zajebisty styl, miło się czyta.

aulory
2

Dzięki :) Mam nadzieję, że ten kurs dotrze do jak największej liczby chętnych nauczyć się JS :-).

Apropos powiązanych materiałów – wkrótce będą we wszystkich częściach kursu, aż uporam się z linkowaniem ich, co jest trochę czasochłonne, mimo specjalnego pluginu.

Pozdrawiam

3

Powoli zaczynasz wkraczać na tematy, które nie są mi znane :-) Jak odwołanie się do formularza przez atrybut name. Trzymaj tak dalej :) Już myślałem nad kupnem jakiejś książki o JS, ale teraz już chyba nie muszę :-D A nawiasem mówiąc, gdybym chciał coś kupić, zakładając że nie jestem zupełnie początkujący, to co byś polecił?

4

http://helion.pl/ksiazki/zaprjs.htm

Nazwa moze mylic, ale polecam.

5

[…] wszystko w tej postaci nadal nic z funkcją $ nie zrobimy. Nie zwraca ona odnośnika. W odcinku 9. poznaliśmy konstrukcję we funkcjach, które zwracają jakieś wartości – chodzi o return. […]

6

fajna strona

gza
7

Uczono mnie że wyrażenie – if (!zmienna) – oznacza ze zmienna jest w złej kondycji. Z przyzwyczajenia wpisałem:

if (!nick)
{
document.forms['dodawanie_posta'].nick.style.border = "2px solid #FF0000";
alert('Nie wypełniłeś pola z nickiem!');
error = true;

}

efekt ten sam, a jakoś ładniej wygląda jeśli nie wymieniamy dodatkowo że białe znaki to też błędy (i dobrze że w przykładzie nie wymieniamy).

Czytam cały dzień ten materiał i jestem zachwycony :) Dzięki serdeczne i pozdrawiam.

nieogarniety
8

Można zawsze lekko usprawnić dając taki kod:

function Verify() {
var nick = document.forms["add"].nick.value;
var content = document.forms["add"].content.value;

var nickstyle = document.forms['add'].nick.style;
var contentstyle = document.forms['add'].content.style;

var error = false;

if(!nick) {
nickstyle.border = "1px solid red";
nickstyle.padding = "1px";
error = true;
} else {
nickstyle.border = "1px solid #999";
nickstyle.padding = "1px";
}

if(!content) {
contentstyle.border = "1px solid red";
contentstyle.padding = "2px";
error = true;
} else {
contentstyle.border = "1px solid #999";
contentstyle.padding = "2px";
}

if(error) {
return false;
}
}

xaoo
9

Wielkie dzięki za kurs ! :)

Dodaj komentarz

Dozwolone tagi: <blockquote>, <code>, <strong>