Walidacja danych po stronie klienta

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-06-15

szukaj: walidacja danych formularz JavaScript JS

Każde dane podane przez użytkownika należy poddać walidacji. Najlepiej zarówno po stronie klienta (używając JS) a także po stronie serwera (korzystając z PHP/innego języka server-side).

Załóżmy, że mamy taki oto formularz:

<div>
	<form action="skrypt.php" method="post">
		<input type="text" name="imie" /><br />
		<input type="text" name="nazwisko" /><br />
		<input type="text" name="adres" /><br />
		<textarea name="komentarz" cols="30" rows="6"></textarea>
		<input type="submit" value="wyślij" />
	</form>
</div>

Jak widać, nie jest to zbyt skomplikowany kod. Prosty formularz, właściwie nawet nie za bardzo wiadomo, co miałby robić. Jednak nie to jest tu istotne. Ważne jest, aby pokazać, jak wykorzystując JS można szybko i wygodnie dokonać walidacji wprowadzonych danych.

Aby móc to zrobić, dodajmy do znacznika form zdarzenie:

<form action="skrypt.php" method="post" onsubmit="return validate();">

Dzięki temu przy próbie wysłania formularza zostanie wywołana funkcja validate():

/*********************************************************************/
/* Autor: Patryk yarpo Jar 2007                                      */
/* Autor zezwala na korzystanie ze skryptow w celach niekomercyjnych */
/* kontakt: yarpo@poczta.onet.pl                                      */
/*********************************************************************/

function error(tekst) {
	if (errfound) return;
		window.alert(tekst);
errfound = true;
}
function validate() {
	errfound = false;
	var bledy = "";
	with (document.forms[0]) {
		if (imie.value == "")  bledy += "Nie podałeś imienia. \n";
		if (nazwisko.value == "")	bledy += "Nie podałeś nazwiska.\n";		
                if (komentarz.value == "") bledy += "Nie napisałeś treści";
		if (bledy != "")  error(bledy); 
	}
return !errfound;
}

Jak widać na powyższym listingu po prostu wszystkie pola zostają po kolei sprawdzone. Jeśli gdzieś jest niepożądana wartość [tu ””], zostaje to dopisane w specjalnej zmiennej. Na końcu sprawdzam, czy zmienna ta jest pusta. jeśli jest, kończę nic ie robiąc. W przeciwnym wypadku zostaje zgłoszony komunikat użytkownikowi.

Warto byłoby także zapoznać się z:

Patryk 'yarpo' Jar

szukaj: walidacja danych formularz JavaScript JS

Osoby czytające tę publikację przeglądały również:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!