Validare de Formulare cu JavaScript

Pentru ca datele din formularele HTML sa fie trimise catre un fisier PHP este de preferat sa faceti o verificare, sa vedeti daca ele corespund campurilor in care au fost introduse. De exemplu atunci cand un utilizator trimite un comentariu si a lasat goala o casuta sau a scris adresa de email aiurea sa putem opri trimiterea datelor mai departe.

Pentru o astfel de verificare se poate folosi si PHP dar consider ca dureaza mai mult. Javascript face fata cu succes acestei sarcini si codul este si foarte simplu. Va arat in continuare cum poate Javascript sa interactioneze cu tastatura utilizatorului, putand in acest fel sa controleze tipul datelor introduse, fara sa permita introducerea altui tip de caractere. Asta este o actiune care nu poate fi facuta in PHP.

Pentru a afla care tasta a fost apasata si a actiona in functie de acest lucru trebuie sa stim mai intai care sunt comenzile pentru asta:

Pentru a face legatura intre apasarea tastei si un obiect html din pagina se poate folosi atat cod in interiorul obiectului html car si apelare de functii javascript :

<form>
	<input type="text" value="apasa o tasta aici" onkeypress="alert('ai apasat o tasta in 
interiorul campului')" />
</form>

<script type="text/javascript">
	function alertare () {
        alert("ai apasat o tasta in interiorul documentului html")
   }
	document.onkeypress=alertare();
</script>

Bineinteles ca exemplele de mai sus nu pot fi utile la nimic in validarea formularelor, dar ajuta la mai buna intelegere a ceea ce va urma. Pentru a face validarea formularelor trebuie sa determinam ce tasta a fost apasata in interiorul obiectului respectiv.

Pentru asta se foloseste keycode care indica codul tastei apasate. Puteti sa vedeti aceste coduri in exemplul de mai jos.

<script type="text/javascript">
	function aratacod(e){
        var unicode=e.keyCode? e.keyCode :   e.charCode
        alert("codul tastei este:" + unicode)
   }
</script>
<form>
	<input type="text"   size="2" maxlength="1" onkeyup="aratacod(event); this.select()" />
</form>

Aceste informatii sunt suficiente pentru a da acum niste exemple care pot fi folosite in aplicatii reale

Validare comentariu in functie de numarul de caractere

<script type="text/javascript">
 

function limitarelungime(obj, length){
	var lungime=length
   if (obj.value.length>lungime)
   	obj.value=obj.value.substring(0, lungime)
}
</script>
Introduceti textul aici (lungimea maxima e de 20 de caractere):
<form>
	<textarea onkeyup="return limitarelungime(this, 20)" 
style="width:300px;height:40px"></textarea>
</form>

Validare numar de telefon

Vom face aceasta validare folosindu-ne de cea de mai sus. Vom limita numarul maxim de caractere la 10 si nu vom permite decat apasarea tastelor de la 0 la 9. Pentru a impune aceasta restrictie ne vom folosi de codurile caracterelor.

<script type="text/javascript">
	function numere(e){
		var unicode=e.charCode? e.charCode :   e.keyCode
       if (unicode!=8){ //daca tasta apasata nu e backspace
      		if (unicode<48||unicode>57) //si nu e nici numar
       	return   false //nu se poate apasa
       }
   }
   
	function limitarelungime(obj, length){
        var lungime=length
        if (obj.value.length>lungime)
        	obj.value=obj.value.substring(0, lungime)
   }
 

</script>
Introduceti   numarul de telefon (lungimea maxima e de 10 de caractere):
<form>
	<textarea onkeypress="return numere(event)"  onkeyup="return limitarelungime(this, 10)" 
style="width:300px; height:25px"></textarea>
</form>

Validare E-mail

Pentru aceasta validare vom folosi doua functii javascript: evalid() si everif().

Prima functie verifica daca s-a scris ceva in campul pentru email si nu cumva a fost lasat gol.

A doua functie verifica daca textul introdus are formatul tipic unei adrese de email: daca contine @ , daca are cel putin un punct, daca punctul nu este cumva plasat imediat inaintea lui @ sau imediat dupa el si daca nu cumva contine mai mult de doua caractere @ .

<script language = "Javascript">
	function everif(str) {
   	var at="@"
       var punct="."
       var lat=str.indexOf(at)
       var   lstr=str.length
       var lpunct=str.indexOf(punct)
       if (str.indexOf(at)==-1){
          	alert("E-mail invalid. Introduceti o   adresa reala!!!")
          	return false
       }
        
		if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
       	alert("E-mail invalid. Introduceti o adresa reala!!!")
           return false
		} 
  
  		if (str.indexOf(punct)==-1 ||   str.indexOf(punct)==0 || str.indexOf(punct)==lstr){
          alert("E-mail invalid. Introduceti o adresa reala!!!")
          return   false
       }
 
 		if (str.indexOf(at,(lat+1))!=-1){
          alert("E-mail invalid. Introduceti o adresa reala!!!")
          return   false
       }
		if (str.substring(lat-1,lat)==punct ||   str.substring(lat+1,lat+2)==punct){
          alert("E-mail invalid.   Introduceti o adresa reala!!!")
          return false
       }

		if   (str.indexOf(punct,(lat+2))==-1){
          alert("E-mail invalid.   Introduceti o adresa reala!!!")
          return false
       }
          
       if (str.indexOf(" ")!=-1){
          alert("E-mail invalid.   Introduceti o adresa reala!!!")
          return false
       }
		return   true 
	}
  
	function evalid(){
       var emailID=document.eFormular.txtEmail
       if ((emailID.value==null)||(emailID.value=="")){
       	alert("Va rog   sa introduceti o adresa de email")
           emailID.focus()
           return false
       }
       if (everif(emailID.value)==false){
         	emailID.value=""
          	emailID.focus()
          	return false
       }
	    return true
    }
</script>
<form name="eFormular" method="post" action="#" onSubmit="return   evalid()">
	<p>Enter an Email Address : <input   type="text" name="txtEmail"></p>
   <p><input type="submit" name="Submit" value="Submit"></p>
</form>

Validare Butoane Radio si Checkbox

In caz ca sunt mai multe variante de raspuns la o intrebare si doriti sa se poata alege doar una este suficient treceti nume identice butoanelor radio care sunt cuprinse in acea intrebare. Vom folosi javascript pentru a ne asigura ca formularul nu va fi trimis fara sa fie bifat un raspuns la fiecare intrebare.

Introducem functia check_buttons care va indica spre fisierul care sa preia datele din formular numai in cazul in care s-a raspuns la fiecare rubrica. Vom verifica asta cu IF, parcurgand inainte fiecare buton ca pe un array cu FOR.

<script language="Javascript">
 

	function   check_buttons(){
   	for(i=0; i<4; i++)
       for (j=0; j<4; j++){
          if(document.form1.intr1[i].checked==true) {
          	if(document.form1.intr2[j].checked==true) { 
          document.form1.action="rezultat.php"; }
		   }
		}
		return
	} 
</script>
<form name="form1" method="post"   onSubmit="javascript:check_buttons();" action="">
	1. Cate   limbaje de programare cunosti?
   <p>
		<input type="radio" name="intr1" value="a">a. Nici unul<br>
       <input type="radio" name="intr1" value="b">b. 1<br>
       <input type="radio" name="intr1" value="c">c. 2<br>
       <input type="radio" name="intr1" value="d">d. 3<br>
 	</p>
   2. De cat timp esti   interesat de Web Design?
   <p>
   	<input type="radio" name="intr2" value="a">a. De cand m-am nascut<br>
       <input type="radio" name="intr2" value="b">b. De mai   mult de 10 ani<br>
       <input type="radio" name="intr2" value="c">c. De mai putin de 10 ani<br>
       <input type="radio" name="intr2" value="d">d. De   Ieri<br>
   </p>
          
   <input type="submit"   value="Trimite formularul">
</form>