Napisane przez Wooya dnia 14 października 2009 19:56 · 0 komentarzy · 10205 czytań ·  ·  · 

No tak, mamy jQuery w PF v7, które... nie jest nigdzie wykorzystywane. Niestety czasu i pomys?u DEV Team nie starczy?o. Ze swej strony postaram si? przedstawi? kilka praktycznych zastosowa? jQuery w PF, które nie wymagaj? ingerencji w pliki ?ród?owe PF.

Prosty sposób na walidacj? pól INPUT, SELECT, TEXTAREA (na przyk?adzie standardowego edit_profile.php): - tworzymy nowy panel i wklejamy przyk?adowy kod, zapisujemy, w??czamy i przechodzimy do edycji profilu:

?>
<script type='text/javascript'>
    $(function(){
        $("input").blur(function(){
           alert($(this).val());
        });
    });
</script>
<?php

W tym przypadku dla ka?dego znacznika INPUT, przy zdarzeniu blur (utrata focusu), otrzymamy komunikat ze strony z zawarto?ci? bie??cego znacznika INPUT. Nic ciekawego, zwyk?a "przeszkadzajka"... Ale sprecyzujmy selektor i dodajmy jaki? komunikat dla zdarzenia:

?>
<script type='text/javascript'>
    $(function(){
        $("input[@type=password]").blur(function(){
           $("#"+$(this).attr("name")+"_validate").remove();
           if ($(this).val().length>0 && ($(this).val().length<6 || $(this).val().length>20)) {
	      $(this).after("<div style='background:yellow;border:1px solid red;color:red;padding:2px' id='"+$(this).attr("name")+"_validate'>Has?o musi posiada? minimum 6 i maksimum 20 znaków...</div>");
           }
        });
    });
</script>
<?php

W tym wypadku mamy gotowy walidator poprawno?ci d?ugo?ci has?a dla PF dla ka?dego pola INPUT typu PASSWORD.

WA?NE! Od jQuery v1.3.x selektory atrybutów nie posiadaj? znaku @ (ma?pa)! Tak?e je?eli zaktualizowa?e? jQuery do v1.3.x w swoim PF, nie zapomnij go usun??, aby przyk?ad zadzia?a?.

W ten sam sposób mo?emy walidowa? dowolne pola pod dowolnym k?tem. Jednak co nam po walidacji ze strony JS, skoro i tak mo?na klikn?? 'Aktualizuj profil' i o ewentualnych b??dach dowiemy si? po od?wie?eniu strony. Przedstawiam sposób na rozwi?zanie tego problemu:

?>
<script type='text/javascript'>
    var profile_errors = 0;
    $(function(){
        $("input[@type=password]").blur(function(){
           profile_errors = 0;
           $("#"+$(this).attr("name")+"_validate").remove();
           if ($(this).val().length>0 && ($(this).val().length<6 || $(this).val().length>20)) {
	      $(this).after("<div style='background:yellow;border:1px solid red;color:red;padding:2px' id='"+$(this).attr("name")+"_validate'>Has?o musi posiada? minimum 6 i maksimum 20 znaków...</div>");
              profile_errors++;
           }
        });
        $("input[@name=update_profile]").bind("click", function(){
            if (profile_errors>0) {
                alert("Niektóre pola zosta?y wype?nione nieprawid?owo!\nNie mo?na zaktualizowa? profilu!");
                return false;
            }
        });
    });
</script>
<?php

W powy?szym przyk?adzie dopóki zmienna profile_errors nie b?dzie równa 0, dopóty formularz nie zostanie wys?any na serwer. Oczywi?cie w przypadku, gdy u?ytkownik ma wy??czon? obs?ug? JS w przegl?darce, skrypt b?dzie zachowywa? si? po staremu.

W nastepnym odcinku jak wymusi? na u?ytkownikach (przy pomocy jQuery) u?ywania "trudnych" hase?...

Tylko zarejestrowani użytkownicy mogą oceniać zawartość strony
Zaloguj się lub zarejestruj, żeby móc zagłosować.

Brak ocen. Może czas dodać swoją?