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.
[codesyntax lang=”javascript”]
<script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="jquery.validate.min.js"></script>
[/codesyntax]
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().
[codesyntax lang=”javascript”]
<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>
[/codesyntax]
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
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.
[codesyntax lang=”javascript”]
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}.")
},
[/codesyntax]
My jednak skorzystamy z metody messages funkcji validate() i ustawimy komunikat dla każdego pola oddzielnie.
[codesyntax lang=”javascript”]
<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>
[/codesyntax]
Schematycznie ma to postać:
[codesyntax lang=”javascript”]
$(document).ready(function() {
$("#id_formularza").validate({
messages: {
pole_name_inputa: {
reguła: 'Komunikat',
reguła2: 'Inny komunikat',
},
}
});
});
[/codesyntax]
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.
[codesyntax lang=”javascript”]
<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>
[/codesyntax]
Reguły możemy także dodawać poprzez odwołanie się do identyfikatora inputa.
[codesyntax lang=”javascript”]
$("#myinput").rules("add", {
minlength: 2
});
[/codesyntax]
Oraz w ten sam sposób zdejmować.
[codesyntax lang=”javascript”]
$("#myinput").rules("remove", "minlength");
[/codesyntax]
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.
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!
Najlepiej chyba będzie, jeśli wstawisz klasę „required” do kodu formularza.
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?
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ć 🙂
Będzie jeszcze coś o jquery ajax? Może kompletny CRUD z wykorzystaniem ajaxa? Oczywiście z tłumaczeniem co i dlaczego
Ciekawa propozycja, będę miał ją na uwadze. Temat byłby na pewno interesujący.
Też byłbym zainteresowany tym CRUD jQuery + ajax + mysql + php. Kiedy można się spodziewac?
Myślę, że nie wcześniej jak pod koniec miesiąca. Ze względu na zwiększone zainteresowanie postaram się tym zająć jak najszybciej 🙂
Można wiedzieć kiedy oraz „czy” będzie ten CRUD? Też jestem ciekawy i zainteresowany tym
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.
Fajnie, czekamy