Napisane przez Wooya dnia 14 października 2009 19:56 · 0 komentarzy · 9937 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ą?