PC Magazine Romania - IPRO - Formulare inteligente cu JavaScript

AgoraNews

PC Magazine Ro

NET Report

Ginfo

agora ON line

PC Concrete

Liste de discuţii

Cartea de oaspeţi

Mesaje

Agora

Clic aici

IPRO - PC Magazine Romania, 2002
Comunitatea experţilor şi a cititorilor PC Magazine - Internet PRO

Formulare inteligente cu JavaScript

Emanuel Baruch

Limbajul JavaScript este o unealtă foarte folositoare, atunci când posibilităţile pe care ni le pune la dispoziţie HTML devin limitate. Practic, orice element dintr-o pagină web poate fi îmbunătăţit cu ajutorul unor scripturi speciale, îndeosebi formularele.

Întâi de toate, trebuie să atrag atenţia asupra faptului că JavaScript nu este acelaşi lucru cu Java. Java este un limbaj de programare dezvoltat de Sun Microsystems iar applet-urile Java reprezintă mici aplicaţii (animaţii, jocuri) care rulează într-o pagină web. În schimb, JavaScript este un limbaj de scriptare cu ajutorul căruia se pot incorpora scripturi direct în paginile web. JavaScript are unele elemente de sintaxă similare celor din Java, însă nu poate fi considerat ca fiind derivat din acest limbaj. JavaScript a fost dezvoltat de Netscape în colaborare cu Sun Microsystems, de aici şi denumirile asemănătoare. Aşadar, "Java" nu este o prescurtare pentru "JavaScript", deşi mulţi fac această confuzie. Acestea fiind spuse, haideţi să vedem, pe scurt, cum folosim în general JavaScript pentru a îmbunătăţi paginile noastre web.

Scripturile JavaScript sunt introduse cu ajutorul tag-ului <script> fie direct în pagina web respectivă, fie ca fişier separat cu extensia js:

În cele mai multe cazuri, este indicată poziţionarea scripturilor în antetul paginii web (între tag-urile <head> ... </head>). Există însă şi situaţii în care ele trebuie incluse în corpul paginii (între tag-urile <body> ... </body>), neputând fi rulate altfel. Aceasta se întâmplă mai ales atunci când codul generează anumite elemente dinamice în pagina web.

Principalele browsere (Internet Explorer, Netscape Communicator, Opera) suportă fără probleme acest limbaj de scripting, însă există unele diferenţe în modul în care sunt interpretate anumite funcţii, chiar şi de la o versiune la alta. Aşadar, nu orice script care funcţionează bine pe Internet Explorer va funcţiona pe Netscape şi invers. Aceste diferenţe dau încă multă bătaie de cap programatorilor web şi chiar şi utilizatorilor, deoarece, spre deosebire de limbajul HTML unde erorile sunt ignorate, în cazul JavaScript vom fi întotdeauna avertizaţi de browser dacă pe pagină ceva nu este în regulă. Anumite funcţii pot conduce chiar şi la blocarea browserului. Nu ne-am propus însă să analizăm aceste bugg-uri, ci ne vom opri doar asupra acelor scripturi care funcţionează fără probleme. Dată fiind varietatea foarte mare, ne vom limita la analiza celor care ne permit îmbunătăţirea performanţelor formularelor din paginile web.

Fără JavaScript, un formular de contact permite utilizatorului introducerea de date aleatoare care vor fi trimise către destinatar. Iată un exemplu:

<form name="formular1" method="post" action="trimitere.php">
Nume: <input type="text" name="nume"><br>
Prenume: <input type="text" name="prenume"><br>
Telefon: <input type="text" name="telefon"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit" name="trimitere" value="Trimite">
</form>

În acest caz, utilizatorul poate completa unul sau mai multe câmpuri cu orice fel de date. JavaScript ne dă posibilitatea controlării riguroase direct din pagina web a cantităţii şi tipului de informaţii introduse de acesta. Bineînţeles că nu vom fi însă în măsură să verificăm veridicitatea acestora cu ajutorul JavaScript. Cu alte cuvinte, putem să-l obligăm pe cel care completează un formular să introducă - de exemplu - numai un anumit număr de caractere acolo unde îi este cerută o dată, să introducă o adresă de e-mail validă din punct de vedere al formei (nume@adresa. extensie) sau să completeze neapărat anumite câmpuri din formular.

Concret, în formularul prezentat în exemplul anterior, dorim ca utilizatorul să nu poată trimite formularul fără a completa toate câmpurile. Iată cum vom proceda: vom crea un script care să efectueze verificarea acestor condiţii, atunci când utilizatorul încearcă să trimită formularul.

Vom plasa acest script în antetul paginii, iar în cadrul tag-ului form vom specifica momentul în care să se declanşeze verificarea, adică la apăsarea butonului "Trimite":

Rezultatul va fi următorul: atunci când formularul este trimis, browserul va verifica dacă există caractere introduse în fiecare câmp. În general, câmpurile unui formular sunt apelate prin şirul:

document.nume_formular.nume_câmp

Existenţa de date introduse într-un câmp (sau mai precis inexistenţa lor) va fi verificată de comanda:
if(document.nume_formular.nume_câmp. value == "")

Dacă nu există date în câmpul respectiv, browserul lansează un mesaj de avertisment:

alert("Mesaj de avertisment!");

Apoi, cursorul se va întoarce la câmpul cu pricina, astfel încât utilizatorul să poată să-l completeze:

document.nume_formular.nume_câmp.focus();

Şirul return false; va împiedica trimiterea formularului. Dacă însă există date în câmpul respectiv, browserul va trece la următoarea verificare precizată în script. În final, dacă nu descoperă nici o lipsă, formularul este trimis.

Aşadar, verificarea se face direct de către browserul utilizatorului şi nu este nevoie ca datele să ajungă mai întâi la destinaţie, pentru a putea fi validate. Aceasta poate economisi timp şi resurse importante.

Haideţi să mai perfecţionăm puţin verificarea. Dorim ca adresa de e-mail să fie validă (din punct de vedere al formei). În scriptul nostru vom adăuga următoarea expresie, între ultimele două paranteze rotunde:

if((document.formular1.email.value == "") || (document.formular1.email.value.indexOf('@') == -1) || (document.formular1.email.value.indexOf('.') == -1) || (document.formular1.email.value.length<6)) {
alert("Adresa de e-mail nu este valida!");
document.formular1.email.focus();
return false;
}

Acest cod va verifica în primul rând dacă adresa de e-mail introdusă conţine caracterele "@" şi "punct" cu ajutorul sintaxei

(document.formular1.email.value.indexOf('@') == -1) respectiv (document.formular1.email.value.indexOf('.') == -1)

Apoi va verifica dacă şirul de caractere introdus este mai mic de 6 caractere:

(document.formular1.email.value.length<6)

Aceasta din cauză că orice adresă de e-mail conţine cel puţin 6 caractere: numele de utilizator (cel puţin un caracter), "@-ul", numele providerului (cel puţin un caracter), punctul şi numele domeniului (cel puţin două caractere). După cum am mai spus, un astfel de cod îl va ajuta pe utilizator să nu introducă din greşeală o adresă de e-mail nevalidă, uitând, de exemplu, să introducă o anumită parte a sa. Dacă acesta este de rea voinţă, atunci va introduce cu siguranţă o adresă de e-mail care nu îi aparţine (cineva@hotmail.com) sau nu există, lucru pe care limbajul JavaScript nu îl poate împiedica. ;-)
În general, pentru a ne asigura că un câmp conţine un anumit caracter sau şir de caractere vom folosi expresia
document.nume_formular.nume_câmp.value.indexOf('şir') == -1

Iar dacă dorim ca un anumit caracter sau şir de caractere să nu fie inclus în câmpul respectiv, expresia va trebui să fie zero:
document.nume_formular.nume_câmp.value.indexOf('şir') == 0

Multe formulare pe web conţin o căsuţă de validare prin care utilizatorul se declară de acord cu anumite condiţii iar formularul nu poate fi trimis dacă această căsuţă nu este bifată. Pentru a realiza acest lucru, introducem înainte de toate căsuţa în formularul nostru:
<input type="checkbox" name="acord" value="da">

În scriptul JavaScript vom introduce (tot între ultimele două paranteze rotunde!) următoarea sintagmă:
if(document.formular1.acord.checked == ""){
alert("Nu aţi acceptat condiţiile noastre!");
return false;
}

Uneori, în interiorul unei casete ne este oferit un text (sau un cod HTML) pe care suntem invitaţi să îl salvăm cu ajutorul mouse-ului şi al operaţiei copy-paste. Dacă aceasta din urmă nu constituie nici o problemă, selectarea textului respectiv poate deveni greoaie, dacă este vorba de câteva pagini de text (de exemplu, termenii şi condiţiile unui contract). În acest caz, cea mai adecvată soluţie ar constitui-o introducerea unui buton care - prin apăsare - va determina selectarea automată a conţinutului căsuţei respective.

Căsuţa de text va fi aceasta:
<textarea name="text" wrap>text ... text text </textarea>

Butonul nostru va fi generat astfel:
<input type="button" name="Button" value="Selecteaza textul" onClick="JavaScript:this.form.text.focus();this.form.text.select();">

Prin apăsarea acestuia au loc succesiv două operaţii: cursorul se va plasa în interiorul casetei de text, după care întreg conţinutul acesteia se va selecta.

O altă situaţie des întâlnită este necesitatea selectării sau deselectării unui număr mare de căsuţe de validare (de exemplu, atunci când trebuie alegem dintr-o listă subiectele care ne interesează). Utilizatorul poate fi scutit de acest efort manual prin adăugarea a două butoane: unul care selectează iar altul care deselectează toate căsuţele. Vom exemplifica pentru un număr de trei astfel de casete de validare, adăugarea (sau eliminarea) altora neconstituind nici o problemă:

<input type="checkbox" name="c1"> prima
<input type="checkbox" name="c1"> a doua
<input type="checkbox" name="c1"> a treia

Vom crea o nouă funcţie în cadrul scriptului nostru. Aceasta va fi introdusă între ultima acoladă şi expresia //> </script>>:
function bifeaza(status){
var colectie=eval("document.formular1.elements['c1']")
for (c=0;c<colectie.length;c++)
colectie[c].checked=status
}

Butoanele vor fi următoarele:
<input type="button" name="buton1" value="Bifeaza tot" onClick="JavaScript:bifeaza(true)">
<input type="button" name="buton2" value="Debifeaza tot" onClick="JavaScript:bifeaza(false)">

Acestea nu trebuie să fie neapărat butoane inserate în formularul respectiv, ci pot fi simple link-uri:
<a href="JavaScript:bifeaza(true)">Bifeaza tot</a>
<a href="JavaScript:bifeaza(false)">Debifeaza tot</a>

Prin apăsarea acestor butoane sau link-uri vor fi selectate, respectiv deselectate, toate casetele de validare care poartă atributul name="c1".

Aţi observat desigur că, atunci când trebuie să alegem o parolă pe o pagină web, suntem obligaţi să o introducem de două ori, pentru verificare. Aceasta se poate realiza foarte simplu cu un script JavaScript. Mai întâi vom crea însă două casete de text de tip parolă:
<input type="password" name="parola1">
<input type="password" name="parola2">

Apoi vom adăuga în scriptul nostru, în cadrul funcţiei verifica următoarea formulă de validare:
if(document.formular1.parola1.value != document.formular1.parola2.value){
alert("Parolele nu sunt identice!");
return false;
}

Această metodă are însă un inconvenient: citirea de către script a parolei nu este sigură, deoarece, cu ajutorul altor funcţii, parola poate ajunge în mâinile altora. Din acest motiv browserul Opera va genera în acest caz de fiecare dată un mesaj de alertă.

Uneori, pentru a-l ajuta pe utilizator în completarea formularului, casetele de text posedă ca valoare iniţială un mesaj sau un exemplu de date care trebuie introduse în locul respectiv. Utilizatorul va trebui să selecteze şi să şteargă conţinutul predefinit al casetei. Şi acest efort poate fi ocolit cu ajutorul unui script JavaScript. Astfel, atunci când utilizatorul va poziţiona cursorul în casetă, conţinutul acesteia va dispărea automat.
<input type="text" name="caseta2" onfocus="this.value=''" value="Introduceti textul aici">

Problema pare rezolvată. Totuşi, acest script nu este foarte bine gândit. Dacă utilizatorul se întoarce la caseta respectivă pentru a efectua modificări, conţinutul acesteia va dispărea atunci când cursorul a fost poziţiona pe ea. De aceea, va trebui să creăm o funcţie separată, care să împiedice acest lucru. Codul casetei noastre va arăta astfel:

Noua funcţie va verifica conţinutul casetei la selectarea ei, şi nu îl va şterge decât dacă acesta este identic cu şirul "Introduceti textul aici":
function sterge(){
if(document.formular1.caseta2.value == "Introduceti textul aici") {
document.formular1.caseta2.value = "";
document.formular1.caseta2.focus();
return false;
}
}

Multe formulare conţin şi un buton care la apăsare resetează formularul şi îl aduce la starea lui iniţială. Acesta poate fi foarte practic în anumite situaţii.

Totuşi, este posibil ca utilizatorul să îl apese accidental, mai ales atunci când butonul este plasat direct lângă cel care trimite formularul respectiv. Pentru a preîntâmpina o astfel de situaţie, se poate crea o funcţie care va genera un mesaj de confirmare, înainte de resetarea formularului, asemănător cu mesajele de confirmare a ştergerii fişierelor din Windows.

function confirma()
{
input_box=confirm("Formularul va fi resetat!");
if (input_box==true)
{

document.formular1.reset();
}
else
{
return false;
}
}

Butonul care apelează această funcţie va fi:
<input type="button" name="stergere" value="Reseteaza" onClick=confirma()>

Mai există o mulţime de scripturi care pot înlesni completarea formularelor şi verificarea datelor introduse. Vă invităm să ne trimiteţi cele care vi se par cele mai interesante. Însă nu uitaţi să le testaţi pe cât mai multe browsere: Internet Explorer (versiunile 4, 5 şi 6), Netscape (versiunile 4 şi 6) şi Opera (versiunea 6).

IPRO - PC Magazine Romania, 2002 Comunitatea experţilor şi a cititorilor PC Magazine - Internet PRO Formulare inteligente cu JavaScript

IPRO - PC Magazine Romania, 2002
Comunitatea experţilor şi a cititorilor PC Magazine - Internet PRO

Formulare inteligente cu JavaScript