tomek.buszewski.com

Jak obie­ca­łem w poprzed­nim wpi­sie, będę tu kon­ty­nu­ował kwe­stię for­mu­la­rzy. W tym przy­padku — przy­pa­dek wali­da­cji tre­ści, po stro­nie użyt­kow­nika oczywiście.

Po pierw­sze — przy­go­to­wa­nie potrzeb­nych rze­czy. A są to:

• fra­me­work jQu­ery;
• plu­gin jquery.validate;
• przyda się też kod źródłowy opi­sany w poprzed­nim wpisie

Na począ­tek, należy w kodzie html, a dokład­nie w polach input, dodać klasy wyma­gane przez plu­gin jquery.validate. Na początku niech to będzie jedy­nie pod­sta­wowa class="required". Ta infor­muje plu­gin, że wypeł­nie­nie ów pola jest wyma­gane, i bez niego nie może prze­pu­ścić użyt­kow­nika dalej.

Zagłębmy się teraz w inne moż­li­wo­ści wtyczki — spraw­dza­nie popraw­no­ści wpisu. Jest to bar­dzo czę­sto przy­datna, a nawet wyma­gana umie­jęt­ność. Zro­bię to na przy­kła­dzie pola o nazwie mail, które natu­ral­nie ozna­cza adres e-mail. Wystar­czy dodać klasę email, by jquery.validate nie akcep­to­wała innego wpisu, jak tylko user@domena.roz. Podob­nie możemy defi­nio­wać na przy­kład adres strony inter­ne­to­wej. Klasa url wymusi for­mat http://strona.roz. Są to tylko przy­kłady, wszyst­kie metody wraz ze zwię­złym komen­ta­rzem znaj­dują się na ofi­cjal­nej stro­nie jQu­ery.

Tyle, jeżeli cho­dzi o html. Zaj­mijmy się teraz napi­sa­niem kilku reguł, by plu­gin mógł dzia­łać. Oso­bi­ście zawsze umiesz­czam kod java­script w osob­nym pliku i nazy­wam go jquery.js. Natu­ral­nie pamię­tamy, by pliki zagnież­dżać w kolej­no­ści 1 — jQu­ery, 2 — plu­giny, 3 — plik z instrukcjami.

Dobrym zwy­cza­jem jest roz­po­czy­na­nie dzia­ła­nia skryp­tów dopiero, gdy zała­duje się cała strona, a żeby to zro­bić, należy cały kod umie­ścić w $(document).ready(function(){ i potem oczy­wi­ście zamknąć to zna­kami });. Spró­bujmy teraz uak­tyw­nić podane wcze­śniej reguły. Można to zro­bić pro­stym kodem $("form#addComments").validate();. Ale to tylko pod­stawy, ostrze­że­nia są w języku angiel­skim, i nie­osty­lo­wane. Warto więc zagłę­bić się w dzia­ła­nie wtyczki. Na począ­tek ustalę spraw­dza­nie pola name, i komu­ni­kat weń. Dodam też mini­malną i mak­sy­malną dłu­gość war­to­ści. Naj­pierw napi­szę 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 — zaczy­namy od otwo­rze­nia pętli dla funk­cji validate. Następ­nie dekla­ru­jemy chęć dosto­so­wa­nia reguł (ważne, by pamię­tać, naj­pierw rules, potem messages), w tym przy­padku dla war­to­ści name wyno­szącą wła­śnie name. Kolejno, podaję, że pole jest wyma­gane (required, można sto­so­wać true, lub false), min- i maxlength, czyli moż­li­wie naj­krót­szą i naj­dłuż­szą war­tość, po czym zamy­kam ostat­nią pętlę. Następ­nie defi­niuję wia­do­mo­ści, jakie mają być wyświe­tlane w kon­kret­nych przy­pad­kach. Skład­nia defi­ni­cji jest iden­tyczna jak wyżej, z tym, że treść wia­do­mo­ści zawsze trzeba poda­wać w cudzy­sło­wach (poje­dyn­czych lub podwój­nych, obo­jętne). W środku może znaj­do­wać się kod html i natu­ral­nie tekst. Ja zde­fi­nio­wa­łem pro­ste komu­ni­katy we wszyst­kich trzech przypadkach.

Poka­za­łem tu naj­waż­niej­sze ele­menty dzia­ła­nia wtyczki. Bar­dziej zło­żone defi­ni­cje nie wyma­gają więk­szej wie­dzy, jedy­nie spo­strze­gaw­czo­ści, by zoba­czyć jak kon­stru­owane są defi­ni­cje, i jak można je mno­żyć. Jak już wspo­mi­na­łem, opis wszyst­kich metod wali­da­cji znaj­duje się na stro­nie jQu­ery.