Overovanie formulárových prvkov pomocou AJAXu za pár minút

Prednedávnom bolo mojou úlohou vrámci tvorby jedného webu implementovať do registračného formulára asynchrónne overovanie emailovej adresy, a to overenie na platný tvar a hlavne overenie, či sa už daný email náhodou v databáze nenachádza.

Keďže písať AJAX requesty ručne je dosť zdĺhavé a pracné, rozhodol som sa využiť možnosti knižnice prototype. Vstupné pole, pre zadanie emailovej adresy malo klasický tvar

<div class="input"> 
  <label for="email">Email:</label> 
  <input type="text" name="email" id="email" maxlength="60" value="@" onchange="mail_check(); return false;"/> <span>Povinné</span> 
</div>

pridal som len volanie funkcie mail_check() pri zmene vstupného poľa, teda spomínané asynchrónne overovanie vstupu.

Samotná funkcia na overenie zadanej emailovej adresy je vďaka použitiu knižnice prototype úplne jednoduchá a prehľadná

function mail_check() 
{ 
  new Ajax.Request( "/weastra/sk/hostessing/check", { method: "post", parameters: { email: $("email").value }, onSuccess: function(transport) 
  { 
    if (transport.responseText == "exists") 
    { 
      form.setStatus($("email").parentNode, false, "E-mail už existuje"); 
    } else if (transport.responseText == "wrong") 
    { 
      form.setStatus($("email").parentNode, false, "Neplatný e-mail"); 
    } else if (transport.responseText == "ok") 
    { form.setStatus($("email").parentNode, true, "E-mail v poriadku"); 
    } 
  } 
});}

Poznámka: setStatus() je funkcia, ktorá zmení textu elementu span, ktorý prísluší k danému formulárovému prvku.

Funkcia po zavolaní pošle metódou POST zadaný email na obslužnú stránku, ktorá následne vráti odpoveď v tvare wrong, exists, alebo ok, teda neplatný, existujúci email, alebo email, ktorý je v poriadku a nenachádza sa ani v databáze.

Obslužná funkcia na strane servera je taktiež úplne jednoduchá, na overenie syntaxe adresy sa používate porovnanie s regulárnym výrazom

private function check_mail() 
{ 
  global $db, $r, $tpl; 
  $email = trim($_POST["email"]); 
  
  if (empty($email)||(!preg_match("/^[^@]+@[^@.]+\.[^@]*\w\w$/",$email))) 
  { 
    echo "wrong"; return; 
  } 
  
  $exists=$db->getCell("SELECT user_id FROM users WHERE login='$email'"); 
  
  if ($exists>0) echo "exists"; else echo "ok"; return; 
}

Použitie AJAXu pomocou knižnice prototype teda nie je nič zložité.