jQuery: Formular de înscriere cu AJAX


După cum promiteam, încercăm să vedem o problemă mai concretă: un formular de înscriere. Privim în stânga şi în dreapta şi alegem Google 😉 . Formularul de înscriere are un buton (check availability) care verifică dacă numele de utilizator ales este liber sau nu. Vom încerca şi noi aşa ceva: verificarea disponibilităţii numelui de utilizator. Dar nu numai…

img566

Pagina demonstrativă vă aşteaptă aici (iar arhiva aici). Şi acum scurte explicaţii. Avem un formular cu cinci câmpuri (nume, prenume, email, nume de utilizator şi parolă). Fiecare câmp are un id pentru o referinţă mai uşoară cu jQuery, şi evident un nume pentru referinţa clasică JavaScript. Sub fiecare câmp (input) am pus un div care iniţial este gol şi în care va apare indicată eroarea, când există: după ce am apăsat butonul Inscriere se va face o evaluare a corectitudinii completării formularului. În loc de buton, am ales să pun un link care nu rupe atât de tare curgerea formularului. La apăsarea lui se va verifica dacă numele de utilizator ales este deja folosit sau nu (formularul nu lucrează cu o bază de date, este doar demonstrativ, dar am "rezervat" numele de utilizatori Alexandru, Grigore şi Tudor şi puteţi verifica aceasta).

În concluzie acest formular "miroase" erorile şi le arată cu roşu sub câmpul care trebuie. Să vedem mai întâi comportamentul la click pe verificarea disponibilitatii alegerii (la link i-am pus id-ul linkusername).

$(’#linkusername’).click(function() {
  $.blockUI();
  $.post("verificare.php",{username: $(’#campusername’).val()}, function(raspuns){
    if(raspuns.search("Ati ales un nume de utilizator liber")!=-1){
      document.formular.fparola.focus();
      culoare = "green";
    }
    else {
      document.formular.fusername.focus();
      culoare = "red";
    }
    $("div#divusername").html("<font color="+culoare+">"+raspuns+"</font>").
    fadeIn("slow").fadeOut("slow").fadeIn("slow");
  });
});

Să "citim" codul. Mai întâi blocăm interfaţa, pentru a nu se altera procesul AJAX (am folosit jQuery şi pluginul BlockUI). Apoi apelăm funcţia AJAX trimiţând ca argument numele de utilizator şi analizăm răspunsul. Dacă în el găsim secvenţa "Ati ales un nume de utilizator liber" înseamnă că este liber: punem variabila culoare pe verde şi mutăm cursorul pe următorul câmp (parola). Dacă nu, punem culoarea pe roşu (semn că nu este bine) şi mutăm cursorul înapoi pe câmpul nume de utilizator. Apoi cu funcţia html() punem în div-ul de sub câmpul nume de utilizator răspunsul primit de la verificare.php cu culoarea cu care trebuie. Dacă descărcaţi arhiva veţi vedea conţinutul fişierului verificare.php: evident Dvs va trebui să puneţi acolo un cod ce verifică cu adevărat disponibilitatea alegerii într-o bază de date de utilizatori.

Trecând mai departe, ne interesează ce se întâmplă când utilizatorul apasă butonul de submit (Inscriere). Am dat un id butonului şi i-am asociat o funcţie pentru click. Important: acea funcţie returnează false pentru ca la apăsarea butonului să nu se "plece" într-o altă pagină. Dorim să facem înscrierea fără reîncărcarea paginii sau încărcarea alteia! În rest, înainte să returneze false, funcţia ataşată butonului nu face decât să blocheze interfaţa şi să lanseze procesul AJAX. Cum avem nevoie de informaţii separate despre nume, prenume, email, nume de utilizator şi parolă, am apelat acum la XML. Pagina inscriere.php returnează un fişier XML care poate arăta ca mai jos. După cum vedeţi, între tagurile email am inclus mesajul de eroare pentru câmpul email.

img567

În funcţia ataşată butonului submit citim mesajele de eroare şi le afişăm în div-ul corespunzător. De exemplu pentru email:

if((email = $("email",xml).text())!=""){
  $("#divemail").html("<font color=red>"+email+"</font>");
  document.formular.femail.focus();
}
else
  $("#divemail").html("");

Salvăm în variabila email mesajul de eroare din fişierul XML. Dacă variabila email nu conţine string gol înseamnă că a fost o eroare. O afişăm cu roşu şi mutăm cursorul în acel câmp. Dacă nu a fost eroare golim div-ul unde informăm despre eroare. Dacă veţi deschide inscriere.php veţi vedea că am analizat câmpurile în ordinea inversă afişării lor în pagină. Astfel cursorul se va poziţiona mereu pe primul câmp problematic. La final analizăm indicaţia dintre tagurile final. Dacă acolo scrie ceva cu "cu succes" e de bine! Ascundem div-ul cu formularul şi afişăm cu verde că s-a făcut înscrierea. Dacă nu, atunci chiar în vârful formularului anunţăm că "Sunt probleme cu datele introduse".

Mai în detaliu nu intru: cei interesaţi au codul cu care pot să testeze imediat cele scrise (amintesc: trebuie să aibă instalat local un server PHP dacă vor să facă teste local). O observaţie importantă însă: am încercat să menţin codul la un minim ceea ce înseamnă că testele nu sunt exhaustive (a se vedea de exemplu verificarea validităţii adresei de email – eu am verificat doar să aibă @ undeva între caractere). Pentru o securitate mai bună este nevoie de teste mai serioase. Şi deşi nu cred că cineva are nevoie de această precizare, subliniez: ca acest cod să devină funcţional trebuie să existe o bază de date, o tabelă, în care să se introducă utilizatorii şi după care să se facă verificarea numelui de utilizator. Cum se face aceasta este o treabă ce ţine de PHP nu de jQuery sau AJAX.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (3 evaluări, media: 4,33 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *