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:
<script language="JavaScript">
<! cod JavaScript >->
</script>
<script language="JavaScript" src="fisier_javascript.js"></script>
Î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.
<script language="JavaScript">
<!-
function verifica(){
if(document.formular1.nume.value == ""){
alert("Completati numele!");
document.formular1.nume.focus();
return false;
}
if(document.formular1.prenume.value == ""){
alert("Completati prenumele!");
document.formular1.prenume.focus();
return false;
}
if(document.formular1.telefon.value == ""){
alert("Completati numarul de telefon!");
document.formular1.telefon.focus();
return false;
}
if(document.formular1.email.value == ""){
alert("Completati adresa de e-mail!");
document.formular1.email.focus();
return false;
}
}
//>>
</script>
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":
<form name="formular1" method="post" action="trimitere.php" onSubmit="return
verifica()">
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 ([email protected]) 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:
<input type="text" name="caseta2" onfocus="JavaScript:sterge()" value="Introduceti
textul aici">
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).
|
