Dzisiaj postaram się Wam pokazać w jaki sposób z wykorzystaniem jQuery i pluginu Validation stworzyć walidację danych, które są wprowadzane do formularza na np. naszej stronie. W taki sposób użytkownik będzie wiedział jakie pola są musi wypełnić, jakie są źle wypełnione, a nawet jakie są dobrze uzupełnione.
Tradycyjnie w sekcji <head>…</head> naszego skryptu umieszczamy trzy linijki:
1 2 3 |
Dzięki pierwszej linijce możemy korzystać z biblioteki jQuery (plik ten można również ściągnąć i umieścić lokalnie na swojej stronie, np. w katalogu js/). Sama biblioteka nam jednak nie wystarczy, bowiem w kolejnej linijce ładujemy odpowiedni plugin Validation wykorzystujący załadowaną wcześniej bibliotekę (plik ten również można ściągnąć i umieścić na swoim serwerze). Polecam, aby te pliki umieścić na swoim serwerze i tak się do nich odwoływać, gdyż wtedy możecie być pewni, że czasem nie znikną. Ostatnia linijka to odwołanie do stylu, który wygląda np. tak:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | .form-div { border: 1px #ccc solid; padding: 10px; width: 650px; } .form-div .submit { margin-left: 155px; margin-top: 10px; } .form-div .label { display: block; float: left; width: 150px; text-align: right; margin-right: 5px; } .form-div .form-row { padding: 5px 0; clear: both; width: 700px; } .form-div label.error { width: 250px; display: block; float: left; color: red; padding-left: 10px; } .form-div input[type=text], select, textarea { width: 250px; float: left; } .form-div textarea { height: 50px; } |
Następnie musimy stworzyć jakiś formularz, w którym będziemy sprawdzać wprowadzane przez użytkownika dane. Przykładowy kod:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <div class="form-div"> <form id="form1" method="post" action=""> <div class="form-row"> <span class="label">Imię *</span> <input type="text" name="name"> </div> <div class="form-row"> <span class="label">Adres e-mail *</span> <input type="text" name="email"> </div> <div class="form-row"> <span class="label">Strona WWW</span> <input type="text" name="url"> </div> <div class="form-row"> <span class="label">Komentarz *</span> <textarea name="comment"></textarea> </div> <div class="form-row"> <input class="submit" type="submit" value="Dodaj"> </div> </form> </div> |
Jak już się zapewne domyśliłeś jest to formularz dodawania jakiegoś komentarza. Czas zająć się tematem tego wpisu, czyli walidacją. Musimy w sekcji <head>…</head> stworzyć odpowiednie reguły walidacji, czyli określić które pola mają być sprawdzane oraz pod jakim kątem ma owo sprawdzenie nastąpić. W związku z tym pod linijkami, które wprowadziliśmy na samym początku wpisujemy:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <script type="text/javascript"> SubmittingForm=function() { alert("Wszystkie dane sa poprawne."); } $(document).ready(function() { $("#form1").validate({ submitHandler:function(form) { SubmittingForm(); }, rules: { name: "required", // simple rule, converted to {required:true} email: { // compound rule required: true, email: true }, url: { url: true }, comment: { required: true } }, messages: { comment: "Wprowadz komentarz." } }); }); </script> |
W pierwszych linijkach wyświetlamy komunikat jeżeli wszystkie dane w formularzu zostały wprowadzone poprawnie. Wewnątrz podstawowej funkcji $(document).ready(function() zagnieździliśmy funkcję $(„#form1″).validate, gdzie #form1 to nazwa identyfikatora jaki został nadany naszemu formularzowi. Następnie określamy reguły walidacji. Każde pole input w naszym formularzu posiada atrybut name i właśnie wykorzystując jego nazwę odnosimy się do niego podczas tworzenia reguł walidacji.
1 | name: "required", |
Powyższy zapis oznacza, że pole Imię jest wymagane i musi w nie zostać coś wpisane. Zawartość tego pola nie jest już w żaden sposób weryfikowana.
1 2 3 4 | email: { required: true, email: true } |
Pole Adres e-mail oprócz tego, że jest polem wymaganym, to dodatkowo sprawdzana jest poprawność wpisanego adresu e-mail. Dzieję się tak, ponieważ parametr email ustawiliśmy na true. Plugin Validation oferuje nam kilkanaście parametrów. Poniżej podaje najważniejsze z nich wraz z przykładowymi wartościami.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | minlength: 4 // minimalna ilość znaków to 4 maxlength: 15 // maksymalna ilość znaków to 15 rangelength: [4, 15] // liczba znaków musi się zawierać między 4 a 15 min: 18 // wartość musi być większą lub równa 18 max: 50 // wartość musi być mniejsza lub równa 50 range: [18, 50] // wartość musi być z przedziału 18, 50 email: true // sprawdza czy podano adres e-mail url: true // sprawdza czy podano poprawny adres URL date: true // sprawdza format daty: dd/mm/rrrr dateISO: true // sprawdza format daty: rrrr/mm/dd lub rrrr-mm-dd dateDE: true // sprawdza format daty: dd.mm.rr lub dd.mm.rrrr digits: true // sprawdza czy podany tylko cyfry number: true // sprawdza czy podano liczbę w formacie 00.00 numberDE: true // sprawdza czy podano liczbę w formacie 00,00 |
Plugin umożliwia nam również podanie własnych komunikatów jakie mają się pojawiać w przypadku wprowadzenia złych danych za pomocą poniższego kodu.
1 2 3 | messages: { comment: "Wprowadz komentarz." } |
W przypadku pozostawienia pola pustego po wysłaniu formularza powinien nam się pojawić odpowiednia informacja. Możemy wprowadzić dla danego pola kilka informacji w zależności co zostało źle wprowadzone. Gdyby np. w polu komentarz można było wprowadzać tylko liczby i minimalna liczba znaków wynosiłaby 10, to powyższy kod wyglądał by tak:
1 2 3 4 5 6 7 | messages: { comment: { required: "Wprowadz komentarz.", minlength: "Za mało znaków", digits: "Wprowadz tylko cyfry" } } |
Dodatkowo w komentarzach możemy również podać jaka jest minimalna liczba znaków. W związku z tym powyższą, środkową linijkę modyfikujemy:
1 | minlength: jQuery.format("Minimalna liczba znakow: {0}") |
Oprócz tego możemy wyświetlać także informacje o tym, że pole zostało dobrze wyświetlone. W tym celu do naszego pliku stylu dodajemy:
1 2 3 4 5 6 7 8 9 | .label.valid { background: url('../images/checked.gif') no-repeat; float:right; color: #000; width:263px; text-align:left; height: 16px; padding-left: 18px; } |
Musimy również zmodyfikować naszą funkcję $(„#form1″).validate i dodać po ({ następujące linijki:
1 2 3 | success: function(label) { label.addClass("valid").text("ok") }, |
Oczywiście plugin oferuje nam o wiele więcej możliwości, ale o tym kiedy indziej. Na zakończenie działające demo.
Popularity: 18%
Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. 
Właśnie takiego pluginu szukałem. Dzięki
Witam.
Siedzę już którąś godzine nad tym pluginem i sprawdzam czemu nie działa mi ani dodawanie, ani ustawianie ruli oraz wiadomości w tym walidatorze.
Doszło teraz do mnie po przejrzeniu dema, że przykładowo:
messages: {
imie:{
required: „To pole jest wymagane.”
}
tyczy się pola o name=”imie” a nie id=”imie”
jednak ja w calym moim formularzu pola nazywam np: user[imie]
aby całą tablicę danych uzytkownika przekazać za jednym razem do klasy dodającej go do bazy.
Jak mogę w tym pluginie ustawić właściwości pola user[imie] ? czy moze zamiast podawac nazwe moge podać id ?
Z góry dziękuje za pomoc.
Może to będzie pomocne
http://docs.jquery.com/Plugins/Validation/rules
Witam,
Mam „drobny” problem. Mam w formularzu pole checkbox ze zgodą na gromadzenie i przetwarzanie danych osobowych. W tym przypadku error wyskakuje mi po lewej stronie checkboxa zamiast z lewej. Jak można to zmienić.
Pozdrawiam
Przemo
poproszę o link lub kod.
Witam serdecznie,
W jaki sposób zmienić wyświetlenie alertu „Wszystkie dane sa poprawne.” na wywołanie pliku zdefiniowanego w „action=” formularza?
Pozdrawiam
Przemo
należy wykasować
2
3
alert("Wszystkie dane sa poprawne.");
}
i jeśli wszystkie dane będą poprawne, to przejdzie do strony zdefiniowanej w „action”.
Wita,
Dziękuję za pomoc w poprzednich zapytaniach.
Mam jeszcze jedno pytanie. W jaki sposób sprawdzić czy wpisana liczba (8 cyfr) na czwartym miejscu ma wpisaną cyfrę 1, czyli ma postać np. 73614732?
Pozdrawiam
Przemo
No dobrze ale często czytam w sieci o formularzach, które będąc validowane tylko przez javascript, w przypadku wyłączenia javascript umożliwiają wysłanie treści.
Więc jak ma wyglądać sama funkcja wysyłająca i pobierająca dane z formularza by zapobiec takiemu procederowi? Oczywiście chodzi mi o formularz kontaktowy.
w tej sytuacji oczywiście trzeba również zrobić walidację po stronie serwera. najlepiej napisać odpowiednią klasę w PHP, która będzie odpowiedzialna za prawidłową walidację.
Bardzo przydatny tutorial. Krótko, zwięźle i na temat. Właśnie czegoś takiego szukałem. Dobra robota!
dziękuje, staram się nie rozwodzić zbytnio, a skupiać na tym co najważniejsze
miło, że komuś się przydało i dzięki za słowa uznania.
pozdrawiam,
[...] czasu minęło odkąd wspomniałem o pluginie Validate do jQuery. Jako, że zapowiedziałem kontynuację tematu, to słowa dotrzymuje. W tym wpisie spróbuje [...]
Witam,
fajny tut.w jaki sposób alert wyświetlić w divie który jest w zupełnie innej części strony?
pozdrawiam
jest taka możliwość, odsyłam do przykładowego dema: http://jquery.bassistance.de/validate/demo/marketo/step2.htm
szczególnie warto zainteresować się tym fragmentem:
2
3
4
5
6
7
8
9
10
11
12
13
14
$("form").validate({
invalidHandler: function(e, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors == 1
? 'You missed 1 field. It has been highlighted below'
: 'You missed ' + errors + ' fields. They have been highlighted below';
$("div.error span").html(message);
$("div.error").show();
} else {
$("div.error").hide();
}
},