ForumCała strona

Nawigacja

Aktualnie online

Gości online: 7

Użytkowników online: 0

Łącznie użytkowników: 25,352
Najnowszy użytkownik: Hotwind77

Logowanie

Nazwa użytkownika

Hasło



Zarejestruj się

Odzyskaj hasło

Shoutbox

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

jantom
29.04.2021 21:03:32
Wszystkiego najlepszego Przemku Smile

MajsterBieda
23.04.2021 01:38:02
Cool

JazOOn
19.04.2021 22:27:51
i jeszcze jeden i jeszcze raz....

jantom
19.04.2021 21:00:37
E tam, tragizujesz.

khaman
18.04.2021 23:41:08
Jak już główny admin staje się duchem, to wiedz, że coś się dzieje..

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

RSS

Nawigacja

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

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