Kontrola formulára pred odoslaním JavaScriptom

Published:

Add / read comments

Určite ste sa mnohí stretli s tým, že ak ste niekedy vložili do nejakého registračného formulára zlé informácie, tak vám aplikácia "vynadala" :-) Je to len ochrana aplikácie pred neželanými dátami a dá sa docieliť dvomi základnými spôsobmi. Prvá je na strane klienta (JavaScriptom) a druhá na strane servera (hocijaký serverový jazyk).

Teraz si dajme tú prvú možnosť. Čiže majme nejaký základný formulár (HTML kód):


<form method="post" name="formular" action="#" onsubmit="return validate_form(this)" >
  Priezvisko:
  <input type="text" name="surname" value="surname" id="surname" maxlength="80" onFocus="document.formular.surname.value='';" />
  <br />
  E-mail:
  <input type="text" name="email" value="email" id="email" maxlength="100" onFocus="document.formular.email.value='';" />
  <br />
  Telefón:
  <input type="text" name="phone" value="phone" id="phone" maxlength="12" onFocus="document.formular.phone.value='';" />
  <br />
  <input type="submit" value="Submit" name="submit_adding" />
</form>

Doňho môžeme zadať priezvisko, e-mail a telefón. Ako vidieť, v kóde sa nachádzajú dve JavaScriptové udalosti, ktoré čakajú na svoje zavolanie. Prvá je "onFocus", ktorá sa aktivuje pri kliknutí do políčka a spôsobí vymazanie preddefinovaných (defaultných) hodnôt, ktoré majú za úlohu napovedať čo tam patrí. Druhá "onSubmit", tá má vykonať spomínanú kontrolu dát vložených do formulára.

Teraz príde na rad samotná funkcia "validate_form(this)":

function validate_form(thisform){

  //jednorozmerne pole bool hodnot
  var valid=new Array(true,true,true);

  with(thisform){		 						  
    //ak validacia neprebehla uspesne  
    if( validate_required(surname)==false ){
 
      //nastavim vlastnost farby policka 'priezvisko' na cervenu 
      document.getElementById('surname').style.color = "red";
 
      //nastavim vlastnost okrajov policka 'priezvisko' na cervenu
      surname.style.border = 'inset red 1px';
 
      //nastav bool hodnotu na "zle"
      valid[0] = false;
 
    //validacia prebehla uspesne
    }else{
      //farby policka nastavime naspat
      document.getElementById('surname').style.color = "";
      surname.style.border = '';
    }
    if( skontroluj_number(phone)==false ){
      document.getElementById('phone').style.color = "red";
      phone.style.border = 'inset red 1px';
      valid[1] = false;
    }else{
      document.getElementById('phone').style.color = "";
      phone.style.border = '';
    }
    if( skontroluj_email(email)==false ){
      document.getElementById('email').style.color = "red";
      email.style.border = 'inset red 1px';
      valid[2] = false;      
    }else{
      document.getElementById('email').style.color = "";
      email.style.border = '';
    }
  }
  var x=0;
  //prejdem pole chyb a zistim, ci bola nejaka chyba
  for (x=0; x<3; x++){ 
    if(valid[x]==false){
      //ak sa nasla chyba => vraciam false => formular nebude odoslany
      alert('Nesprávne vyplnený formulár. Nesprávne vyplnené polia sú označené červenou farbou.');
      return false;		
    }
  }		
}

Ako z kódu vidieť, pomocou magického slovíčka "this" sa dovnútra funkcie predá celý objekt (formulár). K hodnotám políčiek sa dostanem prostredníctvom ich názvu. Napríklad k zadanému priezvisku takto: "thisform.surname.value". Ďalej dobre poslúžia funkcie, ktoré skontrolujú, čo bolo zadané do políčka.

Funkcia "validate_required", ako aj ostatné, využívajú silu regulárnych výrazov. Funkcia vyzerá nasledujúco:

//skontroluje, ci neni dany formularovy prvok prazdny
function validate_required(field){

  with(field){ 
    //ak je policko prazdne => vrat "false"
    if( value == null ){return false}
 
    //ak sa policko rovna default hodnote 'surname' => vrat "false"
    else if(value == 'surname'){return false}
 
    //replace(reg.vyraz,cim zhodu nahradi)
    // ^ = od zaciatku, $ = do konca, g = globalne vyhladavanie
    // * = 0 az N-krat, s = space (medzera) 
    //odfiltruje z retazca medzery => ak je prazdny => vrat "false"
    else if ((value.replace(/^\s*|\s*$/g,"")) == ""){value = "";return false}
 
    //odfiltruje medzery a vrati to naspat
    else{value = value.replace(/^\s*|\s*$/g,"");}
  }
}

Ďalšou funkciou je "skontroluj_number". Táto skontroluje tvar vloženého telefónneho čísla. Umožňuje vložiť číslo mobilného tvaru (0901123456) alebo tvaru pevnej linky s predvoľbou (032/123456) a vyzerá nasledujúco:

//kontrola tel. cisla 
function skontroluj_number(field){

  // d{6,12} => cele cislo 6 az 12-krat
  // d{1,3}\/\d{1,8} => cele cislo 1 az 3-krat, potom lomitko "/" a opat cele cisla 1 az 8-krat
  var regex_num = /(^\d{6,12}$)|(^\d{1,3}\/\d{1,8}$)/;
 
  with(field){
    if( value.search(regex_num)==-1 ){
      return false;
    }		
  }
}

Ďalšou funkciou je "skontroluj_email". Táto skontroluje tvar vloženého e-mailu. Umožňuje vložiť iba reálny tvar poštovej adresy a vyzerá nasledujúco:

//kontrola e-mailu
function skontroluj_email(field){

  // ^[a-zA-Z0-9_-]+ => od zaciatku, 1 az N-krat male/velke pismena, cislice, podtrhovnik a pomlcku
  // @ => nasleduje zavinac
  // \. => musi tam byt bodka
  // {2,4} => za bodkou iba 2 az 4 znaky   
  var regex_mail = /^[a-zA-Z0-9_-]+@([a-zA-Z0-9-]+\.)+[a-zA-Z-]{2,4}$/;

  with(field){
    //ak zhoda zlyhala => vrati "false"
    if( value.search(regex_mail)==-1 ){
      return false;
    }
  }
}

Ako bolo spomenuté, JavaScript pracuje na strane klienta. Klient si ho môže teda vypnúť, aby sa kontrole vyhol. Preto sa netreba spoliehať iba na takýto druh ochrany. JavaScript však poslúži pri znížení toku zlých informácií na server, a tým aj jeho vyťaženosť a preto je vhodné ho využívať.

Published:

Add / read comments

FIND ME

Share, follow or connect with me.