Curs Javascript pentru incepatori . Obiectul FORMS. Partea VII
04 Iunie 2011 de Mihail Alin
Autor : Mihail Alin
Important!! : Textul si imaginile continute in acest curs sunt proprietatea Rotuts.com si nu pot fi copiate/refolosite pe alte pagini/e-books fara acordul nostru.
Important!! : Textul si imaginile continute in acest curs sunt proprietatea Rotuts.com si nu pot fi copiate/refolosite pe alte pagini/e-books fara acordul nostru.
+ Partea I
+ Partea II
+ Partea III
+ Partea IV - Obiectele in JavaScript
+ Partea V - Obiectele location si history
+ Partea VI - Obiectul Document
+ Partea VII - Obiectul form
Obiectul form
1.Formulare in HTML
Un formular este metoda cea mai utilizata si eficienta pentru a colecta informatii de la utilizatorii unei pagini web.
Utilizatorul poate completa campurile cu informatii personale , alege anumite optiuni, etc … si pe final apasa pe butonul SEND ( Trimite ) pentru ca informatia sa fie trimisa catre server.
In formularul de mai sus avem un ansamblu de elemente : butoane , casute de text , casute de verificare , butoane de optiuni, etc … , care permit utilizatorului sa le completeze si sa le trimita catre server .
Formularele se construiesc folosind etichete HTML.Dar, HTML doar ajuta la construirea formularului dar nu si trimiterea/verificarea datelor introduse.
Deoarece acesta nu este un curs HTML ci un curs Javascript , v-om recapitula pe scurt codul HTML necesar pentru a crea un formular.
Pentru a crea un formular in HTML , este necesara folosirea etichetei <form>.Aceasta are urmatoarele atribute :
- method : specifica cum se va trimite informatia catre server.Sunt doua metode : POST si GET.Cea mai folosita metoda este POST.
- name : permite specificarea unui nume pentru formular.Este important sa dam un nume formularului, dupa cum vei putea vedea mai departe.
- action : specifica numele si locatia aplicatiei care va procesa datele.Aceasta aplicatie se executa pe server.
- enctype : indica tipul de informatii care sunt trimise .
- target : indica fereastra in care se va deschide raspunsul de la server dupa ce informatia a fost trimisa.Raspunsul ar putea fi o simpla confirmare cum ca informatia a fost trimisa corect sau ca informatia un a fost trimisa datorita unei erori, etc … .
Intre etichetele <form> si </form> introducem elementele dorite , cum ar fi : butoane , casute de text , textarea , etc …
Fiecare element are asociata o eticheta HTML :
- <INPUT> : se foloseste pentru butoane , casete de text , casute de verificare, butoane de optiuni, casete de parole.Folosind atributul TYPE, indicam tipul elementului dorit.
- <SELECT> : se foloseste pentru a crea o lista drop-down.Fiecare element al listei se creaza cu eticheta <OPTION>.
- <TEXTAREA> : se foloseste pentru a crea o caseta de text de mai multe linii, unde se pot introduce multe informatii.
In continuare , puteti vedea codul HTML folosit pentru a crea formularul din imaginea de mai sus :
<html>
<head>
<title>Curs Javascript pentru incepatori ! Formulare in HTML</title>
</head>
<body>
<form name="informatie">
<!-- caseta de text pentru : nume -->
Nume : <input type="text" name="nume" size="30"><br/><br/>
<!-- codul de mai jos este pentru casuta de prenume -->
Prenume : <input type="text" name="prenume" size="30"><br/><br/>
<!-- codul de mai jos este pentru casuta : adresa -->
Domiciliu : <input type="text" name="adresa" size="70"><br/><br/>
<!-- codul de mai jos este pentru casuta : email -->
Email : <input type="text" name="email" size="30">
<!-- radio : iti place Cursul nostru Javascript pentru incepatori? -->
<p>Iti place Cursul nostru Javascript pentru incepatori? </p>
<input type="radio" value="Da" name="fani">Da
<input type="radio" value="Nu" name="fani">Nu
<!-- checkbox : Care este categoria ta preferata de tutoriale ? -->
<p>Care este categoria ta preferata de tutoriale ?</p>
<input type="checkbox" name="html">HTML & CSS
<input type="checkbox" name="javascript">JavaScript<br/><br/>
<p>Alege culoarea ta preferata</p>
<select size="1" name="culoare">
<option>Albastru</option>
<option>Roz</option>
<option>Galben</option>
<option>Verde</option>
</select>
<p>Mesajul tau pentru noi : </p>
<textarea rows="2" name="mesaj" cols="60"></textarea><br/><br/>
<input type="submit" value="Trimite" name="btn_trimite">
<input type="reset" value="Reseteaza" name="btn_reseteaza">
</form>
</body>
</html>
Acum stim ca formularele se creaza cu HTML si ca trebuie sa scriem o aplicatie pe partea server-ului pentru a procesa trimiterea datelor colectate.
Ce rol joaca JavaScript in aceasta piesa de teatru ??? Putem scrie un script pentru a verifica informatia introdusa in elementele formularului inainte de a fi trimisa catre server.Acest lucru este foarte important deoarece, informatia este trimisa catre server DOAR daca nu s-au gasit greseli in verificarea informatiei pe partea client,adica , in browser-ul client.
Mai departe invatam cum putem verifica un formular folosind Javascript.
2.Ansamblul forms
Primul lucru care trebuie sa il stim este ca exista proprietatea forms care apartine obiectului document.Aceasta proprietate este un array de obiecte form.
Asta inseamna ca fiecare formular introdus pe o pagina web este un element al array-ului forms.Astfel, prima pereche <FORM> … </FORM> constituie elementul document.forms[0] si tot asa cu restul formularelor introduse pe pagina .
Desi notatia care am folosit-o pana acum pentru a accesa un element al unui array este destul de simpla , putem folosi o forma alternativa, prin numele pe care l-am stabilit formularului.
Pentru a putea folosi aceasta metoda este necesara definirea atributului NAME al etichetei HTML <FORM>.Numele indicat in acest atribut este cel folosit in Javascript.
In cazul nostru, am numit formularul de pe pagina web : informatie, astfel putem folosi expresiile : document.forms[0] sau document.informatie.
3.Proprietatea elements
Acum stim cum sa accesam un formular determinat folosind array-ul forms.Dar, de obicei, se acceseaza direct elementele formularului : continutul unei casete de text, optiunea alesa dintr-o lista drop-down, etc …, pentru a putea valida informatiile furnizate de utilizator.
Pentru ca acest lucru sa fie posibil, obiectul forms detine proprietatea elements.Dupa cum probabil va imaginati, aceasta proprietate este un array in care se stocheaza elementele formularului.
Putem face referinta la un anumit element ori folosind indicele corespunzator ori prin numele trecut in atributul NAME al acestuia.
La fel ca si la array-ul forms, pentru a accesa primul element putem folosi aceste patru expresii :
document.informatie.elements[0]
document.forms[0].nume
document.informatie.nume
4. Validarea informatiei
Este timpul sa punem teoria in practica.V-om scrie un script pentru a valida cateva anumite campuri din formular.
De exemplu, o sa comprobam daca utilizatorul a introdus caracterul @ ( arond ) in caseta de text pentru e-mail.Acest caracter trebuie sa apara intotdeauna intr-o adresa de e-mail valida.
function validareEmail(element)
{
if(element.value.indexOf("@") == -1)
{
alert("Adresa de e-mail pe care ai introdus-o nu este corecta");
element.focus();
element.select();
}
}
Functia primeste elementul pe care dorim sa il validam prin intermediul parametrului element, astfel poate verifica continutul acestuia.Pentru asta foloseste proprietatea value.
Cu expresia element.value accesam continutul introdus de utilizator in elementul formularului.
Folosim functia indexOf pentru a comproba valoarea introdusa in caseta de text.Aceasta intoarce valoarea -1 daca caracterul care i-a fost trecut ca parametru nu se afla in textul pe care aplicam functia.
De exemplu : utilizatorul introduce textul curs@javascript.com.Functia obtine acest text prin intermediul expresiei element.value si ii aplica functia indexOf prin intermediul expresiei element.value.indexOf("@"), avand un rezultat diferit de -1 deoarece caracterul @ se poate gasi in text.
In cazul in care rezultatul este -1, afisam mesajul : "Adresa de e-mail pe care ai introdus-o nu este corecta" si aplica metodele select si focus elementului.
Focus focalizeaza pe element iar select selecteaza textul din element ( daca contine ).Cu aceste doua metode ajutam utilizatorul sa isi dea seama cu usurinta in care element a facut greseala.
5. Cand sa efectuam validarea ?
Avem doua posibilitati la dispozitie pentru a efectua validarea informatiilor introduse de utilizator:
- la nivelul formularului : atunci cand utilizatorul decide sa trimita informatia catre server ( atunci cand apasa butonul Send ( Trimite ) );
- la nivelul elementului : de exemplu : atunci cand se schimba continutul unui element.
In orice caz, trebuie sa va amintiti ca validarea se realizeaza inainte ca informatia sa fie trimisa catre server , aceasta este trimisa doar in cazul in care validarea a fost aprobata.
<input type="text" name="email" size="30" onBlur="validareEmail(this)">
Evenimentul folosit este onBlur.Acest eveniment se activeaza atunci cand elementul asupra caruia este aplicat isi pierde focalizarea , adica, atunci cand utilizatorul selecteaza campul Email si pe urma selecteaza alt camp.In momentul in care campul Email este selectat, acesta este focalizat iar atunci cand se selecteaza alt element al formularului acesta pierde focalizarea in favoarea elementului selectat.
Am decis ca in evenimentul onBlur sa apelam functia validareEmail trecandui ca parametru propriul element, adica chiar caseta de text Email.Aceast lucru il putem face folosind cuvantul rezervat this.
Daca preferi sa validezi la nivel de formular atunci evenimentul oportun este onSubmit.Acest eveniment apartine obiectului formular.
De exemplu, putem scrie o functie care comproba daca utilizatorul a activat una dintre casutele care permit utilizatorului sa ne spuna care categorie de tutoriale ii place mai mult.
function raspunsIntrebare()
{
var trimite = true;
if(document.informatie.html.checked == true)
{
trimite = true;
}
else
{
if(document.informatie.javascript.checked == true)
{
trimite = true;
}else{
trimite = false;
}
}
if (trimite == false)
{
alert("Trebuie sa raspunzi la intrebarea: Care este categoria ta preferata de tutoriale ?");
return false;
}
else{
return true;
}
}
Folosim variabila trimite pentru a sti daca informatie trebuie trimisa sau nu catre server.
Proprietatea checked ne ajuta sa aflam daca utilizatorul a bifat o casuta.In cazul in care nu a bifat niciuna dintre cele doua casute, variabila trimite este false; iar in cazul in care una sau amandoua casute sunt bifate, trimite este true.
Daca dupa ce am comprobat casute , variabila trimite este false atunci afisam utilizatorului un mesaj prin care ii spunem ca trebuie sa ne spuna care este categoria lui favorita si blocam trimiterea datelor catre server.Iar daca dupa comprobarea casutelor variabila trimite este true atunci trimitem informatia catre server.
Acum sa vedem cum apelam aceasta functie :
Folosim evenimentul onSubmit pentru a apela functia.Observa ca nu doar apelam functia, ci intoarcem ceea ce functia intoarce.
Astfel, daca onsubmit intoarce true, atunci informatia este trimisa catre server, iar daca intoarce false se anuleaza trimiterea deoarece nu a trecut validarea.
Evenimentul onsubmit atunci cand un buton de tip Submit este apasat sau cand se apasa butonul enter.Daca ne uitam cu atentie putem sa ne dam seama ca evenimentul onsubmit apartine formularului , nu butonului Submit.
Un element de tip reset este un buton de resetare, adica, implicit curata informatiile introduse in formular.Daca doriti sa programati ceva atunci cand acest buton este apasat , atunci trebuie sa o faceti in evenimentul onReset al formularului.
6. Tipuri de validare
In aceasta parte a cursului Javascript pentru incepatori am vazut cum putem realiza validarea datelor introduse de utilizator intr-un formular.
Aceasta validare este efectuata inainte ca datele sa fie trimise catre server, datorita codului scris pe partea client folosind Javascript.
Cu toate acestea,ar trebui sa fie clar ce tip de validare se poate realiza prin aceasta metoda:
Putem scrie un cod pe partea client pentru a verifica daca adresa de e-mail introdusa este valida, adica, daca implineste cerintele fiecarei adrese de acest tip.
Ceea ce nu putem face de pe partea client este sa verificam daca aceasta adresa de e-mail exista in baza de date a firmei noastre, de exemplu.Pentru a face aceasta verificare trebuie sa scriem un cod pe partea server.
Gata :).Sper ca va este folositor cursul nostru si speram sa auzim parerile voastre sau chiar si aditiile care credeti ca ar trebuie adaugate.O zi buna :P.
Da si tu un like
Tweet
Daca ti-a fost folositor acest tutorial/articol, poti copia urmatorul cod pe pagina ta