W kursie była już mowa o obsłudze formularzy i integracji ich z AJAXem. Dzisiaj chciałbym pokazać w jaki sposób możemy walidować dane wpisywane przez użytkownika przed ich wysłaniem do skryptu PHP. Walidacja po stronie klienta zapewnia użytkownikowi dużą wygodę korzystania z formularzy.

 

 

Instalujemy wtyczkę

Do sprawdzania formularzy posłuży nam plugin jQuery o nazwie Validation. Pobrać go można ze strony developerów. Tam też znajdują się jego pełna dokumentacja.

Po pobraniu katalogu wystarczy dołączyć jeden plik (jquery.validate.min.js) do sekcji head naszego szablonu.

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>

 

Weryfikacja danych za pomocą klas

Plugin Validation daje nam możliwość walidacji formularza poprzez nadanie odpowiednich klas danym inputom, jak i poprzez kod JS. Przeanalizujmy najpierw pierwszą, szybszą i chyba wygodniejszą możliwość.

Przyjrzyjmy się formularzowi dostępnemu w dokumentacji. Walidacja kodu odbywa się poprzez wywołanie funkcji validate().

<html>
<head>
	<title>Kurs jQuery #5 example 1</title>
	<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="jquery.validate.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		$("#formularz").validate();
	});
	</script>
 
	<style type="text/css">
		em, .error {
			color: red;
		}
	</style>
</head>
 
<body>
<form id="formularz" method="post" action="">
	<fieldset>
		<legend>Prosty przyklad walidacji formularza</legend>
		<p>
			<label for="cname">Imie</label><em>*</em>
			<input id="cname" name="name" size="25" class="required" minlength="2" />
		</p>
		<p>
			<label for="cemail">E-Mail</label><em>*</em>
			<input id="cemail" name="email" size="25"  class="required email" />
		</p>
		<p>
			<label for="curl">URL</label>
			<input id="curl" name="url" size="25"  class="url" value="" />
		</p>
		<p>
			<label for="ccomment">Wiadomosc</label><em>*</em>
			<textarea id="ccomment" name="comment" cols="22"  class="required"></textarea>
		</p>
		<p>
			<input class="submit" type="submit" value="Wyslij !" />
		</p>
	</fieldset>
</form>
 
</body>
</html>

DEMO

Reguły ustawiane są poprzez nadanie klas inputom. Ponadto mamy możliwość określenia minimalnej i maksymalnej liczby wymaganych znaków. Odpowiadają za to kolejno atrybuty minlength oraz maxlength z odpowiednią wartością. Poniżej kilka przykładowych klas służących do definiowania reguł:

  • required – pole wymagane
  • email – pole typu email
  • url – adres URL
  • Więcej opcji jak digits, number, date itp. znajdziecie w dokumentacji 
Jeśli po kliknięciu przycisku „Wyslij !” któreś z pól zostało wypełnione nieprawidłowo to skrypt doda znacznik label z informacją o błędzie obok odpowiedniego inputa.

Jak można zauważyć błędy wyświetlane są w języku angielskim. Aby je przetłumaczyć możemy skorzystać z pliku validate.js i zmienić je bezpośrednio w kodzie źródłowym.

messages: {
	required: "This field is required.",
	remote: "Please fix this field.",
	email: "Please enter a valid email address.",
	url: "Please enter a valid URL.",
	date: "Please enter a valid date.",
	dateISO: "Please enter a valid date (ISO).",
	number: "Please enter a valid number.",
	digits: "Please enter only digits.",
	creditcard: "Please enter a valid credit card number.",
	equalTo: "Please enter the same value again.",
	accept: "Please enter a value with a valid extension.",
	maxlength: $.validator.format("Please enter no more than {0} characters."),
	minlength: $.validator.format("Please enter at least {0} characters."),
	rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
	range: $.validator.format("Please enter a value between {0} and {1}."),
	max: $.validator.format("Please enter a value less than or equal to {0}."),
	min: $.validator.format("Please enter a value greater than or equal to {0}.")
},

My jednak skorzystamy z metody messages funkcji validate() i ustawimy komunikat dla każdego pola oddzielnie.

<html>
<head>
	<title>Kurs jQuery #5 example 2</title>
	<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="jquery.validate.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		$("#formularz").validate({
			messages: {
				name: {
					required: 'Pole wymagane',
					minlength: 'Wpisz conajmniej {0} znaki',
				},
				email: {
					required: 'Pole wymagane',
					email: 'Wpisz poprawny adres email',
				},
				url: {
					url: 'Wpisz poprawny adres URL',
				},
				comment: {
					required: 'Pole wymagane',
				},
			}
		});
	});
	</script>
 
	<style type="text/css">
		em, .error {
			color: red;
		}
	</style>
</head>
 
<body>
<form id="formularz" method="post" action="">
	<fieldset>
		<legend>Prosty przyklad walidacji formularza</legend>
		<p>
			<label for="cname">Imie</label><em>*</em>
			<input id="cname" name="name" size="25" class="required" minlength="2" maxlength="5" />
		</p>
		<p>
			<label for="cemail">E-Mail</label><em>*</em>
			<input id="cemail" name="email" size="25"  class="required email" />
		</p>
		<p>
			<label for="curl">URL</label>
			<input id="curl" name="url" size="25"  class="url" value="" />
		</p>
		<p>
			<label for="ccomment">Wiadomosc</label><em>*</em>
			<textarea id="ccomment" name="comment" cols="22"  class="required"></textarea>
		</p>
		<p>
			<input class="submit" type="submit" value="Wyslij !" />
		</p>
	</fieldset>
</form>
 
</body>
</html>

DEMO

Schematycznie ma to postać:

$(document).ready(function() {
	$("#id_formularza").validate({
		messages: {
			pole_name_inputa: {
				reguła: 'Komunikat',
				reguła2: 'Inny komunikat',
			},
		}
	});
});

 

Sprawdzanie pól poprzez kod JavaScript

Może się zdarzyć, że nie będziemy chcieli, albo nie będziemy mogli modyfikować klas formularza. Żaden problem, zawsze możemy wykorzystać metodę rules i ustawić reguły w kodzie JavaScript. Konstrukcja ma taką samą postać, jak w przypadku metody messages.

<html>
<head>
	<title>Kurs jQuery #5 example 3</title>
	<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="jquery.validate.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		$("#formularz").validate({
			rules: {
				name: {
					required: true,
					minlength: 2,
				},
				email: {
					required: true,
					email: true,
				},
				url: {
					url: true,
				},
				comment: {
					required: true,
				},
			},
			messages: {
				name: {
					required: 'Pole wymagane',
					minlength: 'Wpisz conajmniej {0} znaki',
				},
				email: {
					required: 'Pole wymagane',
					email: 'Wpisz poprawny adres email',
				},
				url: {
					url: 'Wpisz poprawny adres URL',
				},
				comment: {
					required: 'Pole wymagane',
				},
			}
		});
	});
	</script>
 
	<style type="text/css">
		em, .error {
			color: red;
		}
	</style>
</head>
 
<body>
<form id="formularz" method="post" action="">
	<fieldset>
		<legend>Prosty przyklad walidacji formularza</legend>
		<p>
			<label for="cname">Imie</label><em>*</em>
			<input id="cname" name="name" size="25" />
		</p>
		<p>
			<label for="cemail">E-Mail</label><em>*</em>
			<input id="cemail" name="email" size="25" />
		</p>
		<p>
			<label for="curl">URL</label>
			<input id="curl" name="url" size="25"  value="" />
		</p>
		<p>
			<label for="ccomment">Wiadomosc</label><em>*</em>
			<textarea id="ccomment" name="comment" cols="22"></textarea>
		</p>
		<p>
			<input class="submit" type="submit" value="Wyslij !" />
		</p>
	</fieldset>
</form>
 
</body>
</html>

DEMO

Reguły możemy także dodawać poprzez odwołanie się do identyfikatora inputa.

$("#myinput").rules("add", {
 minlength: 2
});

Oraz w ten sam sposób zdejmować.

$("#myinput").rules("remove", "minlength");

Jeśli nie podamy drugiego argumentu, wyczyszczone zostaną wszystkie reguły.

 

Zakończenie

Plugin Validate ma oczywiście o wiele więcej możliwości, które jednak nie zostały opisane w powyższym tekście. Zachęcam do własnoręcznego poszukiwania i eksperymentowania. Należy oczywiście pamiętać, że po przesłaniu formularza, dane należy jeszcze raz zweryfikować w skrypcie PHP.

Przeczytaj także: