ForumCała strona

Nawigacja

Aktualnie online

Gości online: 3

Użytkowników online: 0

Łącznie użytkowników: 25,293
Najnowszy użytkownik: Hayuna

Logowanie

Nazwa użytkownika

Hasło



Zarejestruj się

Odzyskaj hasło

Shoutbox

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

khaman
17.04.2019 21:12:06
Wyrwałem chwasty Grin

piterus
17.04.2019 17:00:38
Jakieś boty nam się tu wraz z większą temperaturą zalęgły...

krystian1988
10.04.2019 07:38:30
Oby więcej Grin a już straszą opadami śniegu Sad

Pieka
08.04.2019 20:12:26
No, pogoda ekstra! Smile

krystian1988
07.04.2019 08:23:14
Ale pogodnie Pfft

Pobierz nową wersję
Pobierz podręcznik
Zobacz inne oficjalne Supporty
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 · 7310 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