ForumCała strona

Nawigacja

Aktualnie online

Gości online: 10

Użytkowników online: 0

Łącznie użytkowników: 25,283
Najnowszy użytkownik: ziomciu76

Logowanie

Nazwa użytkownika

Hasło



Zarejestruj się

Odzyskaj hasło

Shoutbox

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

khaman
10.01.2019 13:21:35
Zdarza się Smile

Apis
10.01.2019 10:18:02
Niejaki KellyTurner śmieci nam w serwisie Smile

Apis
03.01.2019 17:02:45
Lepszego Grin

khaman
02.01.2019 08:09:14
Szczęśliwego Smile

krystian1988
01.01.2019 02:39:59
Szczęśliwego Nowego Roku wszystkim Smile

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

RSS

Polecamy hosting Hekko.pl

Nawigacja

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

Napisane przez Wooya dnia 14 październik 2009 19:56 · 0 komentarzy · 7243 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