Jak obiecałem w poprzednim wpisie, będę tu kontynuował kwestię formularzy. W tym przypadku – przypadek walidacji treści, po stronie użytkownika oczywiście.

Po pierwsze – przygotowanie potrzebnych rzeczy. A są to:

Na początek, należy w kodzie html, a dokładnie w polach input, dodać klasy wymagane przez plugin jquery.validate. Na początku niech to będzie jedynie podstawowa class="required". Ta informuje plugin, że wypełnienie ów pola jest wymagane, i bez niego nie może przepuścić użytkownika dalej.

Zagłębmy się teraz w inne możliwości wtyczki – sprawdzanie poprawności wpisu. Jest to bardzo często przydatna, a nawet wymagana umiejętność. Zrobię to na przykładzie pola o nazwie mail, które naturalnie oznacza adres e-mail. Wystarczy dodać klasę email, by jquery.validate nie akceptowała innego wpisu, jak tylko user@domena.roz. Podobnie możemy definiować na przykład adres strony internetowej. Klasa url wymusi format http://strona.roz. Są to tylko przykłady, wszystkie metody wraz ze zwięzłym komentarzem znajdują się na oficjalnej stronie jQuery.

Tyle, jeżeli chodzi o html. Zajmijmy się teraz napisaniem kilku reguł, by plugin mógł działać. Osobiście zawsze umieszczam kod javascript w osobnym pliku i nazywam go jquery.js. Naturalnie pamiętamy, by pliki zagnieżdżać w kolejności 1 – jQuery, 2 – pluginy, 3 – plik z instrukcjami.

Dobrym zwyczajem jest rozpoczynanie działania skryptów dopiero, gdy załaduje się cała strona, a żeby to zrobić, należy cały kod umieścić w $(document).ready(function(){ i potem oczywiście zamknąć to znakami });. Spróbujmy teraz uaktywnić podane wcześniej reguły. Można to zrobić prostym kodem $("form#addComments").validate();. Ale to tylko podstawy, ostrzeżenia są w języku angielskim, i nieostylowane. Warto więc zagłębić się w działanie wtyczki. Na początek ustalę sprawdzanie pola name, i komunikat weń. Dodam też minimalną i maksymalną długość wartości. Najpierw napiszę całość, a potem wyjaśnię po kawałku.

  1. $("form#addComments").validate({
  2. rules: {
  3. name: {
  4. required: true,
  5. minlength: 3,
  6. maxlength: 15
  7. }
  8. },
  9. messages: {
  10. name:  {
  11. required: "<span>Wpisz swoje imię!</span>",
  12. minlength: "<span>Za krótkie. Minimalna ilość znaków to 3!</span>",
  13. maxlength: "<span>Za długie. Maksymalna ilość znaków to 15!</span>"
  14. }
  15. }
  16. });

Po kolei – zaczynamy od otworzenia pętli dla funkcji validate. Następnie deklarujemy chęć dostosowania reguł (ważne, by pamiętać, najpierw rules, potem messages), w tym przypadku dla wartości name wynoszącą właśnie name. Kolejno, podaję, że pole jest wymagane (required, można stosować true, lub false), min- i maxlength, czyli możliwie najkrótszą i najdłuższą wartość, po czym zamykam ostatnią pętlę. Następnie definiuję wiadomości, jakie mają być wyświetlane w konkretnych przypadkach. Składnia definicji jest identyczna jak wyżej, z tym, że treść wiadomości zawsze trzeba podawać w cudzysłowach (pojedynczych lub podwójnych, obojętne). W środku może znajdować się kod html i naturalnie tekst. Ja zdefiniowałem proste komunikaty we wszystkich trzech przypadkach.

Pokazałem tu najważniejsze elementy działania wtyczki. Bardziej złożone definicje nie wymagają większej wiedzy, jedynie spostrzegawczości, by zobaczyć jak konstruowane są definicje, i jak można je mnożyć. Jak już wspominałem, opis wszystkich metod walidacji znajduje się na stronie jQuery.