jQuery #5 – Walidacja formularzy

Mar 19
2012

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.

11 komentarzy w “jQuery #5 – Walidacja formularzy”

  1. CNK napisał/a:

    Witam,
    w jaki sposób dodać kolejną klasę w pliku jquery.validate.js, która byłaby wymagana? Chodzi mi o przykład pierwszy: ‚Weryfikacja danych za pomocą klas’. Próbowałem dodać do classRuleSettings swoją klasę, która miałaby być wymagana w ten sposób:
    MojaKlasa: {required: true},
    jednak to nie zadziałało..

    Pozdrawiam!

  2. CNK napisał/a:

    tak, tak robię z tym co mogę, jednak pewien kod mam już generowany przez inny jquery (do uploadu obrazków), dlatego zmieniając tamto musiałbym zmienić kod w kilku innych plikach..
    Jest jakiś sposób by dodać jedną klasę do pliku jquery.validate.js?

    • Komeniusz napisał/a:

      W pliku jquery.validate.min.js poszukaj linijki classRuleSettings:{required:{required:true} (jest to plik skompresowany, ale chyba sobie poradzisz z odczytem). Spróbuj tam dodać analogicznie wpis classRuleSettings:{required:{required:true},inna_klasa:{required:true}, […]

      Powinno zadziałać 🙂

  3. forcier napisał/a:

    Będzie jeszcze coś o jquery ajax? Może kompletny CRUD z wykorzystaniem ajaxa? Oczywiście z tłumaczeniem co i dlaczego

  4. Edi napisał/a:

    Można wiedzieć kiedy oraz „czy” będzie ten CRUD? Też jestem ciekawy i zainteresowany tym

    • Komeniusz napisał/a:

      Będzie na pewno, jednak mam dużo projektów na głowie i czas mnie ogranicza. Postaram się wszystko ogarnąć i przygotować artykuł na początek sierpnia. O wszystkim na pewno poinformuję wcześniej na moim Facebooku. Przepraszam za przeciąganie i proszę jeszcze o troszkę cierpliwości. Nie chciałbym rozbijać CRUDa na dwie lub więcej części.

  5. webghost napisał/a:

    Fajnie, czekamy

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *