Partea a 7-a: Formularele
Validarea datelor introduse in formular
Formularele (Forms) sunt foarte des intalnite pe Internet. Datele introduse in formular (input) sunt de regula trimise inapoi la server sau prin posta electronica catre un cont de email. Dar puteti fi siguri ca datele intoduse de catre utilizator sunt corecte? Cu ajutorul JavaScript datele introduse intr-un formular pot fi cu usurinta verificate inainte de a fi transmise prin Internet. Mai intai as dori sa demonstrez cum formularele pot fi verificate (validate). Apoi vom examina posibilitatile de a trimite informatii prin Internet.
Mai intai sa creem un script simplu. Pagina HTML va contine 2 elemente text. Utilizatorul trebuie sa introduca numele in primul text si adresa de email in cel de-al doilea. Puteti introduce orice in formular si apoi apasati butonul. De asemenea incercati sa nu introduceti nimic si sa apasati butonul.
In cazul primului element introdus se va returna un mesaj de eroare daca nu este nimic introdus. Desigur, acest tip de verificare insa nu impiedica utiliztorul sa introduca un nume fals! Browserul accepta si numere. Asa ca daca veti introduce '17' va fi returnat mesajul 'Hi 17!'. Se pare ca nu este cel mai bun mod de verificare.Cum arata scriptul pentru aceste doua elemente si pentru verificare? Iata-l:
<html>
<head>
<script language="JavaScript">
<!-- Hide
function test1(form) {
if (form.text1.value == "")
alert("Please enter a string!")
else {
alert("Hi "+form.text1.value+"! Form input ok!");
}
}
function test2(form) {
if (form.text2.value == "" ||
form.text2.value.indexOf('@', 0) == -1)
alert("No valid e-mail address!");
else alert("OK!");
}
// -->
</script>
</head>
<body>
<form name="first">
Enter your name:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="Test Input" onClick="test1(this.form)">
<P>
Enter your e-mail address:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="Test Input" onClick="test2(this.form)">
</body>
</html>
Mai intai uitati-va la codul HTML din corpul documentului. Este vorba doar de creerea a doua elemente text si doua butoane. Butoanele apeleaza functiile test1(...) sau test2(...) in functie de ce buton este apasat.
Transmitem this.form catre functii pentru a adresa elementele din functii.
Functia test1(form) verifica daca sirul este gol. Aceasta se realizeaza prin intermediul if (form.text1.value == "")... . 'form' este variabila care primeste valoarea 'this.form' .
Putem obtine valoarea elementului introdus prin folosirea 'value' in combinatie cu form.text1.
Pentru a vedea daca siul este gol il comparam cu "".
Daca datele introduse sunt egale cu "" atunci nu a fost introdus nimic. Utilizatorul va primi un mesaj de eroare. Daca ceva este introdus utilizatorul va primi un mesaj OK.
Problema care poate aparea aici este ca utilizatorul poate introduce numai spatii. Acestea sunt consemnate ca un input valid! Daca doriti, puteti verifica aceste posibilitati si sa le excludeti. Cred ca este destul de usor cu informatiile continute aici.
Acum aruncati o privire pe functia test2(form).
Aceasta functie compara sirul de intrare cu un sir gol "" pentru a fi siguri ca a fost introdus ceva.
Dar mai trebuie ceva adaugat comenzii if. Operatorul || este numit operatorul OR. Ati facut cunostiinta cu el in partea a 6-a.
Comanda if verifica daca prima sau cea de-a doua comparare este adevarata.
Daca cel putin una dintre ele este adevarata atunci comanda if primeste valoare 'adevarat' si urmatoarea comanda este executata. Aceasta inseamna ca veti obtine un mesaj de eroare daca sirul este gol sau daca nu exista caracterul @ in sirul dumneavoastra.
Verificarea existentei unor caractere
Cateodata dorim sa restrictionam sirul introduse la unele caractere sau numere. Ganditi-va la un numar de telefon - ceea ce este introdus trebuie sa fie compus numai din numere (presupunem aici ca numarul de telefon nu contine nici un alt caracter). Putem verifica daca inputul este un numar. Dar multi oameni folosesc o serie de simboluri cand isi scriu numerele de telefon - de exemplu: 01234-56789, 01234/56789 sau 01234 56789 (cu un spatiu intre cifre). Utilizatorul trebuie fortat sa introduca numarul de telefon fara aceste simboluri. Trebuie deci sa extindem scriptul sa verifice ciferele si alte simboluri. Urmatorul exemplu din cartea mea de JavaScript demonstreaza acest lucru.
Iata codul sursa:
<html>
<head>
<script language="JavaScript">
<!-- hide
// ******************************************************
// Script from Stefan Koch - Voodoo's Intro to JavaScript
// http://rummelplatz.uni-mannheim.de/~skoch/js/
// JS-book: http://www.dpunkt.de/javascript
// You can use this code if you leave this message
// ******************************************************
function check(input) {
var ok = true;
for (var i = 0; i < input.length; i++) {
var chr = input.charAt(i);
var found = false;
for (var j = 1; j < check.length; j++) {
if (chr == check[j]) found = true;
}
if (!found) ok = false;
}
return ok;
}
function test(input) {
if (!check(input, "1", "2", "3", "4",
"5", "6", "7", "8", "9", "0", "/", "-", " ")) {
alert("Input not ok.");
}
else {
alert("Input ok!");
}
}
// -->
</script>
</head>
<body>
<form>
Telephone:
<input type="text" name="telephone" value="">
<input type="button" value="Check"
onClick="test(this.form.telephone.value)">
</form>
</body>
</html>
Functia test() specifica ce caractere sunt valide.
Transmiterea inputului din formulare
Care sunt posibilitatile de a transmite inputul din formulare? Cea mai convenabila este de a trimite datele prin email. Vom examina metoda mai pe indelete.
Daca doriti ca datele introduse in formular sa fie prelucrate de catre server trebuie sa folositi CGI (Common Gateway Interface).
Aceasta va permite sa proocesati automat datele din formular. de exemplu, serverul poate creea o baza de date pe baza datelor introduse de catre clienti. Alt exemplu sunt paginile index gen Yahoo. De regula exista un formular pentru realizarea unui cautari in baza de date.
Utilizatorul primeste un raspuns rapid dupa ce butonul a fost apasat.
Nu este nevoie ca utilizatorul sa astepte ca persoanele care administreaza servereul sa citeasca formularul si sa caute informatiile cerute.
Aceasta este realizat automat de catre server. JavaScript nu poate realiza astfel de sarcini.
Nu puteti creea "guestbooks" (-albume pentru vizitatori-) folosind JavaScript pentru ca JavaScript nu poate scrie intr-un fisier pe server. Aceasta se poate realiza numai prin CGI. Se poate creea un album pentru vizitatori cu mesajele primite de la vizitatori prin email. Trebuie insa sa raspundeti personal, ceea ce este in regula daca nu va asteptati sa primiti 1000 de emailuri pe zi. Asa ca aici nu aveti nevoie de JavaScript! Aveti nevoie de JavaScript numai daca verificati datele introduse in formular. Trebuie sa mentionez ca formatul comenzii mailto nu functioneaza intotdeauna - de exemplu Microsoft Internet Explorer 3.0 nu il suporta.
<form method=post action="mailto:your.address@goes.here" enctype="text/plain"> Do you like this page? <input name="choice" type="radio" value="1">Not at all.<br> <input name="choice" type="radio" value="2" CHECKED>Waste of time.<br> <input name="choice" type="radio" value="3">Worst site of the Net.<br> <input name="submit" type="submit" value="Send"> </form>Proprietatea enctype="text/plain"este folosita pentru a trimite text neformatat. Acesta face ca mailul sa fie mult mai usor de citit.
Daca doriti sa validati formularul inainte de a fi trimis pe retea puteti folosi evenimentul onSubmit. Trebuie sa introduceti acest eveniment intr-un tag <form>. Ajungeti la urmatorul rezultat:
function validate() {
// check if input ok
// ...
if (inputOK) return true
else return false;
}
...
<form ... onSubmit="return validate()">
...
Cu acest cod formularul nu este trimis daca datele introduse sunt gresite.
Cu ajutorul metodei focus() puteti transforma formularul intr-un formular prietenos. Puteti defini asupra carui element sa fie indreptata atentia la inceput. Sau puteti transmite browserului sa revina in locul din formular unde datele introduse au fost gresite. In acest caz, browserul va initializa cursorul in elemetul din formular specificat incat utilizatorul sa nu trebuiasca sa clickeze in formular inainte de a introduce ceva. Puteti realiza acestea cu ajutorul urmatorului script:
function setfocus() {
document.first.text1.focus();
}
Acest script va atrage atentia catre primul element text. Trebuie sa specificati numele intregului formular - ce poarta numele de first aici - si numele unui singur element din formular - aici text1. Daca vreti sa indreptati atentia asupra unui element atunci cand pagina se incarca puteti adauga o proprietate onLoad tagului <body>. Scriptul arata astfel:
<body onLoad="setfocus()">Puteti extinde cu ajutorul secventei de cod:
function setfocus() {
document.first.text1.focus();
document.first.text1.select();
}
Incercati acest cod:Puteti observa ca elementul text atrage atentia si ca inputul este selectat.
©1996,1997 by Stefan Koch
e-mail:skoch@rumms.uni-mannheim.de
http://rummelplatz.uni-mannheim.de/~skoch/
My JavaScript-book