jQuery: sprawdzanie dostępności

Autor: Arkadiusz Tobiasz 14 maja 2010

W dzisiejszym wpisie zaprezentuję Wam jak z wykorzystaniem biblioteki jQuery napisać sprawdzanie dostępności np. loginu przy rejestracji na stronie. Funkcja ta na pewno będzie przydatna na stronie internetowej i znacznie ułatwi odwiedzającym rejestrację na niej.Standardowo rozpoczynamy od ściągnięcia biblioteki jQuery, którą następnie wrzucamy na nasz serwer. Musimy również dołączyć bibliotekę do naszego skryptu w sekcji <head>…</head>:

1
<script src="http://ajax.googleapis.com/ajax/ libs/jquery/1.3.0/jquery.min.js" type="text/javascript"></script>

W tej sekcji musimy teraz napisać odpowiednią funkcję, która będzie sprawdzać dane wpisane w formularz. Warunki jakie muszą być spełnione, to wpisany nick musi mieć więcej niż 4 znaki oraz musi być dostępny, tzn. nick nie może znajdować się w naszej bazie danych. Funkcja będzie wyglądać następująco:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 <script type="text/javascript">
$(document).ready(function()
{
     $("#username").change(function()
     {
          var username = $("#username").val();
          var msgbox = $("#status");

          if(username.length > 4)
          {
               $("#status").html('<img src="loader.gif">&nbsp;Sprawdzanie dostępności.');
               $.ajax({
                    type: "POST",
                    url: "check_username.php",
                    data: "username="+ username,
                    success: function(msg){
                         $("#status").ajaxComplete(function(event, request){
                              if(msg == 'OK')
                              {
                                   $("#username").removeClass("red");
                                   $("#username").addClass("green");
                                   msgbox.html('<img src="yes.png"> <font color="Green"> Dostępny</font>');
                              }
                              else
                              {
                                   $("#username").removeClass("green");
                                   $("#username").addClass("red");
                                   msgbox.html(msg);
                              }
                    });
               }
          });

     }
     else
     {
          $("#username").addClass("red");
          $("#status").html('<font color="#cc0000">Za mało znaków</font>');
     }
     return false;
     });
});
</script>

Krótki komentarz. Funkcja $(„#username”).change(function(){} jest wywoływana za każdym razem, gdy zmienia się wartość pola formularza o id równym username. Następnie tworzymy zmienną username, która zawiera zawartość pola formularza o wspomnianym id. Robimy to poprzez przyrównanie zmiennej do $(„#username”).val();. Druga zmienna msgbox odpowiada za wyświetlenie odpowiedniego komunikatu, np. o dostępności nicka. W pierwszym warunku sprawdzamy długość wpisanego nicka. Jeśli wpisany nick ma więcej niż 4 znaki, to wykonywany jest kod w 11-33. W przeciwnym wypadku dodajemy do naszego pola o id równym username klasę o nazwie red, co spowoduje dodanie czerwonego tła. Dodatkowo wyświetlona zostanie informacja „Za mało znaków”. Jeśli natomiast liczba wprowadzonych znaków jest większa od 4, to następuje sprawdzenie dostępności nicka w bazie danych. Podczas sprawdzania dostępności wyświetlany jest komunikat „Sprawdzanie dostępności” (linia 11). Sprawdzanie odbywa się z wykorzystaniem skryptu check_username.php, do którego wysyłana jest za pomocą metody POST zmienna username (linie 13-15). W przypadku, gdy skrypt nie znajdzie wprowadzonego nicka w bazie danych z pola o id równym username usuwamy klasę red (na wszelki wypadek jakby była dodana) i dodajemy klasę green, która wyświetla zielone tło oraz pojawia się komunikat „Dostępny”. W przeciwnym wypadku usuwamy klasę green i dodajemy klasę red oraz komunikat o tym, że dany nick jest zajęty.

Dodajmy teraz pole, w którym będziemy wpisywać nick:

1
<input id="username" name="username" type="text" /> <span id="status"> </span>

Plik stylu, który będzie deklarował klasy red i green może wyglądać tak:

1
2
3
4
5
6
7
8
.green
{
background-color:#CEFFCE;
}
.red
{
background-color:#FFD9D9;
}

Pozostał jeszcze skrypt check_username.php sprawdzający istnienie nicka w bazie danych:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
// łączenie się z bazą danych
if(isset($_POST['username']))
{
$username = $_POST['username'];
$username = mysql_real_escape_string($username);
$sql = mysql_query("SELECT user_id FROM users WHERE username='$username'");
if(mysql_num_rows($sql))
{
echo '<span style="color: #cc0000;"><strong>'.$username.'</strong> jest już zajęty.</span>';
}
else
{
echo 'OK';
}
}
?>

Tradycyjnie działający skrypt możecie znaleźć tutaj.

komentarze 24

  1. robbys napisał(a):

    Zaważyłem błąd formalny w kodzie php (linia 8) do czego to sql_check wymagane tylko sql.
    Mam jeszcze pytanie. Czy testowałeś w IE ? U mnie przyznam nie ma oczekiwanego rezultatu jak FF (z polem username nic sie nie dzieje – pewnie jakiś bug).
    Na marginesie bardzo przydatne.
    Pozdro

  2. robbys napisał(a):

    linia 8 of cource ;-|

  3. robbys napisał(a):

    Powalczyłem…już jest dobrze w IE i FF. Czeski błąd w css.
    Przepraszam za zamieszanie.

  4. robbys napisał(a):

    … a jednak nie dokońca w css. W FF jest super, natmiast IE lipa. Używam jQuery 1.3.2.min. Czy w tym może byc problem ?

    Pozdr.
    robbys

  5. Marek napisał(a):

    Może u ciebie działa. Ale to co tu wkleiłeś ma chyba jakieś błędy -.-”
    Ponieważ połączenie z bazą danych mam, bo news’y działają. A jakimś cudem to nie.
    Dodam że nie zmieniałem nic w twoim kodzie

    • Arkadiusz Tobiasz napisał(a):

      A w pliku check_username.php dodałeś to połączenie z bazą danych?
      Zazwyczaj robi się to includując plik config.php

      Robbys jakoś postępował według wskazówek i mu zadziałało.

  6. pavlov napisał(a):

    Czy przypadkiem w pliku check_username.php w 8 linii kodu zamiast zmiennej „$sql_check” nie powinna być zmienna „$sql” ?

  7. poniatowski napisał(a):

    Mam pytanie. Czy kod, sprawdza dostępność loginu automatycznie? Tzn. jak jeszcze piszę ? Bo u mnie skrypt niby działa, ale nie wiem czy prawidłowo, ponieważ skryp działa w momencie jak przestanę pisać i zabiorę kursor do innego inputa. Tak, ma być? w sumie nie tego oczekiwałem 😀

    • Arkadiusz Tobiasz napisał(a):

      Sprawdza w momencie wypełnienia pola. Sprawdzanie za każdym wciśnięciem klawisza to rozwiązanie nieoptymalne, bo przy 7 literach skrypt wysyła 7 zapytań do serwera.

      • poniatowski napisał(a):

        to prawda z tą optymalizacją. ale dla użytkownika może być to zmorą :/ np podany login juz jest zajęty, wpisujesz jedną wiecej literkę do wczesniejszego loginu, a skrypt, pokazuje dalej komunikat o niedostępności loginu 🙁 skąd użytkownik ma wiedzieć, ze przejscie do następnego inputa zadziała skrypt? wiesz, podpowiesz mi jak przerobić skrypt, zeby sprawdzał login od razu? nie wiem po każdej wpisanej literce? albo coś? proszę 🙂 pozdrawiam 🙂

        • poniatowski napisał(a):

          I nie sprawdza w momencie wpisywania loginu. Tylko zaczyna sprawdzanie po wpisaniu całego loginu i po zabraniu kursora muszki z tego inputu albo kliknięcie na tło etc

        • Arkadiusz Tobiasz napisał(a):

          Bo jak przejdzie do kolejnego inputa, to mu się pojawi znaczek czy login jest dostępny czy nie. Na większości serwisów tak to działa, że sprawdza dostępność dopiero po opuszczeniu inputa. Ewentualnie obok jest ikonka, po kliknięciu której sprawdza dostępność nicka.

          • poniatowski napisał(a):

            wcale nie :p przykład:)
            wpisz powoli po jednej literce a 🙂 i przyglądaj sie jak szybko wszystko działa 🙂 i o taki skrypt mi chodzi 🙂

          • Arkadiusz Tobiasz napisał(a):

            Na mojej stronie, która dziennie ma kod 4k do 12k odwiedzin już by nie było tak różowo. Póki strona jest rzadko odwiedzana, to problemu nie ma. Jak zacznie być popularna, to będziesz szukał optymalizacji na każdym kroku, aby nie musieć więcej płacić za hosting czy przejść na dedyka.

  8. poniatowski napisał(a):

    ale znacznie lepiej to wygląda. znam strone gdzie tak jest i nie odczówa sie tego obciążenie, skrypt raptownie sprawdza login, po wpisaniu kazdej kolejnej literki. powtarzam sie, ale przecież użytkownik moze nie wiedzieć, ze trzeba zabrać kursor z pola i co wtedy? np wpisał: admin (login zajety), dodał lietrke: admin1 (komunikat: login zajety), ale w bazie danych login admin1 nie istnieje(oczywiście szary uzytkownik o tym nie wie) i wpisuje dalej literkę np: admin13 (login nie istnieje), wpisuje uporczywie dale: admin yxz123 (komunikat: login nie istnieje)! i po 10 razie użytkownik skapuje sie ( albo i nie) ze trzeba zejść z pola, azeby zadziałał skrypt. dla mnie to średnie rozwiązanie? po co takiego? żeby wkurzyć odbiorcę (usera?)

    • poniatowski napisał(a):

      Twój skrypt ratuje jeszcze napis „sprawdzanie dostępności” 🙂 ale ogólnie skrpyt jest ładny 🙂 Ja po prostu pisze jak ja zrobiłbym etc 🙂 nieobrażaj sie 🙂 jak cos:)

  9. wirus napisał(a):

    a jak go przerobić żeby w momencie kiedy już istnieje taki login użytkownik nie miał możliwości kliknięcia „wyślij” – bo przy tym rozwiązaniu ma – mimo że username istnieje….

  10. Piotrek_10243 napisał(a):

    Witam mam pytanie nic nie zmieniałem w kodzie i wszystko działa za wyjątkiem tego że kolor pola po wpisaniu poprawnej nazwy użytkownika nadal pozostaje czerwony i nie chce się zmienić na zielony może ktoś wie dlaczego?

    • Arkadiusz Tobiasz napisał(a):

      W demie działa dobrze, widocznie masz inną klasę CSS która nazywa się tak samo jak w tutorialu

      masz

      1
      2
      $("#username").removeClass("red");
       $("#username").addClass("green");

      więc usuwa klasę red i dodaje klasę green, więc kolor powinien się zmienić

Odpowiedz

 

Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. Więcej...

jQuery Validation i funkcja remote

Jakiś czas temu zwrócił się do mnie użytkownik z problemem. Chodzi o to, że korzysta on z pluginu walidacji jQuery, […]

Zend Framework: integracja z Uploadify

W tym wpisie postaram się przedstawić Wam w jaki sposób zintegrować skrypt Uploadify z Zend Frameworkiem. Dzięki temu będziemy mogli […]

Javascript: Czasowe wyświetlanie reklamy

Czasami chcemy, aby na pewnym elemencie naszej strony wyświetlała się reklama przez jakiś czas, a następnie zniknęła. W tym wpisie […]

Linux: backup wszystkich baz danych MySQL

Swego czasu pisałem o tym jak z poziomu konsoli można szybko i przyjemnie zrobić backup bazy MySQL. Wszystko jest ładnie […]