AJAX, jQuery, Captcha a formulár úradujú spoločne

Published:

Add / read comments

Formuláre sú základnou súčasťou internetovej aplikácie. Prostredníctvom nich užívatelia odosieľajú do aplikácie dáta. Pri tvorbe formulára je však dôležité položiť si zopár otázok.

Medzi základné patria:

  • ako získam od užívateľov dáta v správnom tvare?
  • ako ochránim formulár pred spam robotmi?
  • ako to všetko urobiť aby to bolo pekné?

Čo sa týka kontroly validity dát na strane klienta, o tom som už jeden článok napísal, ale tam nebolo využité jQuery. Nuž, teraz sa pokúsim objasniť akou cestou by som sa pri tvorbe formulára s využitím jQuery, AJAX a captcha vybral ja:

Tak, začína sa pri HTML, ktoré predstavuje samotný formulár. Tentoraz to bude jednoduchý formulár na zber e-mail adries, na ktoré sa potom budú odosielať novinky. Teda newsletter formulár, mnohí z Vás sa s tým už stretli, najmä na eshop stránkach, kde nás k tomu nabádajú, aby sme si nechali zasielať novinky o fajných akciách.

<form id="ajaxNewsletterForm" method="post"> 
  <label>Meno:</label> 
  <input class="textbox" type="text" name="name" maxlength="60" value="" /> 
  <br /> 
 
  <label>Váš e-mail:</label> 
  <input class="textbox" type="text" name="email" maxlength="100" value="" /> 
  <br /> 
 
  <label>&nbsp;</label> 
  <div id="captchaimgreload"> 
    <a href="#" title="Kliknutím obnovíte obrázok"> 
      <img src="./image.php?<?php echo time(); ?>" alt="captcha" width="80" height="20" id="captchaimg" />
    </a> 
  </div> 
  <input class="captchatextbox" type="text" name="captcha" maxlength="6" id="captchatext" value="opíš kód" /> 
  <br /> 
 
  <label>&nbsp;</label> 
  <input class="button" type="submit" name="submit" value="Odoslať" /> 
</form>

Samotné HTML samozrejme nijako neohúri, tak je možné ešte doplniť nejaké CSS podľa ľubovôle.

Teraz príde na rad samotné jQuery. jQuery je JavaScriptová knižnica, ktorá uľahčuje vývojárovi život. To je dôvod, prečo sa stala takou populárnou. Aj ja som len čučal, čo všetko je možné dosiahnuť pomocou pár riadkov kódu s využitím tejto knižnice.

Knižnicu si teda stiahneme zo stránok jQuery a prilinkujeme do stránky. Rovnako je potrebné si stiahnuť validovací plugin na strane klienta a tiež prilinkovať do stránky. Ku pluginu je k dispozícii aj slovenské rozšírenie, avšak ja v mojej ukážke nadefinujem slovenské upozornenia priamo v kóde a tie prebijú tie defaultné v rozšírení.

<script type="text/javascript" src="./js/jquery_v1.4.3.js"></script> 
<script type="text/javascript" src="./js/jquery.validate.js"></script> 
<script type="text/javascript" src="./js/jquery.validate.slovak.js"></script>

Knižnica a plugin sú nalinkované, začneme písať validovací JavaScript kód s využitím jQuery. Nasledujúcou funkciou zabezpečíme, že všetok kód sa načíta pred načítaním samotnej stránky a bude teda prichystaný.

$(document).ready(function() { 
 
  //  jQuery kód idem sem 
 
}

Teraz je potrebné pre jednotlivé políčka zadefinovať validačné pravidlá a spôsob, akým užívateľa na zlý vstup upozorniť. Kód sa umiestni dovnútra štartovacej funkcie, tak ako je spomenuté vyššie.

// validuje ajaxNewsletter form na udalosti keyup 
$("#ajaxNewsletterForm").validate({ 
  rules: { 
    name: { 
      required: true, 
      minlength: 3 
    }, 
    email: { 
      required: true, 
      email: true 
    }, 
    captcha: { 
      required: true, 
      remote: "./captcha_overenie.php" 
    },			
  }, 
  //tymto prepisem defaultny jquery.validate.slovak.js 
  messages: { 
    name: { 
      required: "Zadajte meno",  
      minlength: "Meno musí obsahovať aspoň 3 znaky" 
    }, 
    email: "Zadajte platnú emailovú adresu", 
    captcha: "Chybný obrázkový kód. Kliknutím získate nový.",                    
  } 
});

Čiže ako vidieť, všetky políčka sú nastavené ako povinné. U mena je minimálna dĺžka 3 znaky a u e-mailu je zadefinované, že vstupný reťazec musí mať tvar e-mailovej adresy. Pri políčku captcha sa jQuery pripojí k inému súboru. Tentoraz je to PHP súbor, ktorého obsah môže vyzerať napríklad nasledovne:

<?php 
 
session_start(); 
 
if(strtoupper($_GET['captcha']) == $_SESSION['cid']) 
  echo 'true'; 
else 
  echo 'false'; 
 
?>

Pripojenie zabezpečí metóda "remote". Ak sa kód zadaný do captcha políčka zhoduje s kódom uloženým v session, tak súbor vráti logickú premennú true a jQuery považuje vstup za valídny. V opačnom prípade dôjde k upozorneniu užívateľa ešte pred samotným pokusom formulár odoslať. Hodnoty sú totiž na server posielané na pozadí aplikácie prostredníctvom technológie AJAX.

Do formulára ešte môžeme pridať takú vychytávku, aby sa v políčku kam sa zadáva obrázkový kód objavil nejaký preddefinovaný text, ktorý sa po kliknutí do políčka vymaže. Alebo ak užívateľ nechá políčko prázdne a klikne niekde inde, aby sa defaultný textík opäť v políčku objavil. Stačí spraviť niečo takéto:

// onFocus udalost na captcha input 
$("#captchatext").focus(function () {               
  if( this.value == 'opíš kód' ){		
    $(this).attr('value', ''); 
  }				 				 
}); 
 
// onBlur udalost na captcha input 
$("#captchatext").blur(function () {               
  // replace vykona regularny vyraz na obsah pola 
  // ak najde zhodu (hlada medzeru) => nahradi znak prazdnou hodnotou 
  if( this.value.replace(/^\s*|\s*$/g,'') == '' ){ 		
    $(this).attr('value', 'opíš kód'); 
  }				 				 
});

Samozrejme že hore uvedený kód opäť umiestnime dovnútra štartovacej funkcie.

Takisto je vhodné užívateľovi poskytnúť možnosť vygenerovať obrázok nový v prípade ak ho nemôže prečítať. Preto prostredníctvom jQuery udalosti "click" vygenerujeme obrázok nový a to opäť na pozadí aplikácie prostredníctvom AJAX technológie.

// zmena captcha obrazku po kliknuti  
$("#captchaimg").live('click',function(){ 
 
  // AJAXom odoslana poziadavka na zmenu captcha ID session 
  $.ajax({ 
    type: "GET", 
    url: "captcha.php", 
    success: function(navratka){ 
      // console.log(navratka); //testujem navratovu hodnotu 
    } 
  }); 
 
  // do DIVu "captchaimgreload" nacita obsah ktory vygeneruje PHP skript 
  // obsahom je novy obrazok vykreslujuci aktualnu hodnotu v captcha ID session  
  $("#captchaimgreload").load('captcha_new.php'); 
  return false;        
 
});

Čiže na serveri umiestnený PHP skript "captcha.php" najprv vygeneruje novú hodnotu captcha identifikátora a uloží ju do session a potom druhý PHP skript "captcha_new.php" vráti kus HTML kódu aj s elementom img, ktorý jQuery vykreslí.

Čo sa týka samotného vykresľovania, resp. generovania obrázku, tosi nechám ako samostatný článok nabudúce, cca o týždeň sa k tomu dostanem. Mám na to takú malú triedu v PHP urobenú.

V prípade že užívateľ vyplní všetky políčka tak ako je potrebné, jQuery sa postará o odoslanie dát na server opäť prostredníctvom AJAXu, kde ich nejaký skript spracuje a vráti nejaký oznam (to je samozrejme na programátorovi).

$.validator.setDefaults({ 
  submitHandler: function() { 
 
    // nacita data z formulara 
    var str = $("#ajaxNewsletterForm").serialize(); 
 
    $.ajax({ 
      type: "POST", 
      url: "kontakt.php", 
      data: str, 
      success: function(msg){ 
	$("#note").ajaxComplete(function(event, request, settings){ 
	  // sprava uspesne odoslana => skryje sa hlavny formular 
	  if(msg == 'OK'){ 
	    result = '<div id="ok">Váš e-mail bol zaradený do mailing listu!</div>';						
 
	    $("#fields").hide('fast',function(){ 
	      // funkcia html() nahradi obsah DIVu "note" spravou (to je informacny DIV "result") 
	      $("#note").html(result); 
	      // najprv skryje element 
	      $("#ok").hide(); 
	      // opat zviditelny element s efektom									 
	      //$("#ok").show('slow');  //aj toto funguje 
	      $("#ok").slideDown("slow");									
	    });						 																		
	  } 
	  // chybne vyplnene polia 
	  else{ 
	    $("#note").html(msg); 
	  }																									 				
	}); 
      } 
    });	                   	
  return false;			
  } 
});

Čiže PHP skript "kontakt.php" dáta spracuje a vygeneruje odpoveď. jQuery pôvodný formulár skryje a s nejakým pekným efektom vygenerovanú odpoveď vykreslí. V tomto spočíva krása jQuery, že môžete dosiahnuť pekné efekty veľmi ľahko. Celý formulár v akcii si môžete pozrieť tuto.

Published:

Add / read comments

FIND ME

Share, follow or connect with me.