ForumCała strona

Nawigacja

Aktualnie online

Gości online: 5

Użytkowników online: 0

Łącznie użytkowników: 25,399
Najnowszy użytkownik: AlojzyBartek

Logowanie

Nazwa użytkownika

Hasło



Zarejestruj się

Odzyskaj hasło

Shoutbox

Musisz zalogować się, aby móc dodać wiadomość.

JazOOn
06.12.2024 23:45:46
Amen

Zbigniew@
17.11.2024 11:33:24
Nie ten grzeszy kto pije, ale ten, kto się nie upije.

JazOOn
16.11.2024 20:46:18
tja

Zbigniew@
15.11.2024 18:58:17
Kto pije, ten nie bije.

JazOOn
31.10.2024 20:49:47
Kto pije?

Pobierz nową wersję
Pobierz podręcznik
Zobacz inne oficjalne Supporty
Statystyki supportu
PHP-Fuson PL na Facebooku

RSS

Polecamy hosting SferaHost.pl

Nawigacja

jQuery i PF v7 w jednym stali domu... cz.1

Napisane przez Wooya dnia 14 października 2009 19:56 · 0 komentarzy · 9946 czytań · Drukuj · Facebook · Wykop

Streszczenie:

Niniejszy artykuł dedykuję osobom, którym statyczne PF zbrzydło, a faktu i powodu załączenia framework'a jQuery w PF v7 nie rozumieją...

PS: Czym jest jQuery, tłumaczyć nie będę. Odsyłam do dobrze napisanego API na http://docs.jquery.com

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ł...

Komentarze

Brak komentarzy. Może czas dodać swój?

Dodaj komentarz

Zaloguj się, aby móc dodać komentarz.

Oceny

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

Brak ocen. Może czas dodać swoją?
Created by Arox Copyright (C) 2004
Copyright (C) 2004 - 2018 Ekipa PHP-Fusion.pl