Jak na to: snadná validace HTML formulářů a jejich AJAXové zpracování

Udělat před lety webový formulář, který bude na klientské straně ověřovat data a následně je zpracuje pomocí AJAXu, aniž by se znovu načítala celá stránka, vyžadovalo množství kódu. Dnes je situace jiná, stačí vám troška JavaScriptu a CSS pro úpravu vzhledu formuláře.

Vzpomínám si, když jsem poprvé vyvářel ověřování dat ve formuláři. Byl to neskutečný opruz. Ani nevím, zda ještě tehdy neexistovalo jQuery nebo jsem jej neznal. Každopádně stejně pracné, jako tehdy bylo ověřování vyplněné hodnoty v povinném políčku v HTML formuláři, bylo i následné zpracování takového formuláře pomocí AJAXu.

Ostatně jak na AJAX bez javascriptových frameworků ukazuje můj starší článek AJAX pro začátečníky: formulář zpracovaný bez opětovného načtení stránky. Potřebujete tam psát spoustu nudného kódu se špatně zapamatovatelnou syntaxí.

Framework jQuery tohle celé zjednodušuje. V článku si ukážeme dva pluginy pro jQuery, které slouží k validaci dat ve formuláři a k jeho AJAXovému zpracování. Pro jednoduchost budeme kontrolovat pouze to, zda jsou políčka vyplněna. Po odeslání formuláře zobrazíme v jeho spodní části poděkování.

Jednoduchý HTML formulář

Začněme tedy tím, že si připravíme jednoduchou webovou stránku v HTML5 s formulářem obsahujícím políčka pro zadání jména, kontaktního údaje a zprávy. Pod formulářem budou tlačítka pro jeho odeslání a vyprázdnění.

<!DOCTYPE html>
<html lang="cs">
  <head>
    <meta charset="utf-8">
    <title>Ukázka validace formulářů</title>
    <style>
      body { padding: 60px; }
      form{  width: 300px; }
    </style>
  </head>

  <body>

  <form action="zpracuj.php" method="post" id="formular">
    <label for="jmeno">Vaše jméno</label><input type="text" name="jmeno" />
    <label for="kontakt">Kontaktní telefon nebo e-mail</label><input type="text" name="kontakt"/>
    <label for="vzkaz">Vzkaz</label><textarea name="vzkaz"></textarea>
    <div>
     <input type="submit" value="Odeslat zprávu">
     <input type="reset" value="Vyprádznit">
    </div>
  </form>



  </body>
</html>

Jak vidíte, výsledek odpovídá zadání, chtělo by to ale více kaskádových stylů, tedy abyste pomocí CSS vzhled formuláře upravili do uživatelsky přívětivé podoby.

Tip: ušetřete si práci se styly pomocí Twitter Bootstrap

O knihovně Twitter Bootstrap jsem na Maxiorlovi několikrát psal, ale vždy jen okrajově v jiných článcích. Jedná se o sadu CSS a JavaScriptu, kterou můžete použít pro tvorbu responzivního webdesignu. V našem formuláři ji využijeme k tomu, abychom nemuseli pracně vymýšlet jeho vzhled a CSS pro něj.

Díky použití Twitter Bootstrap totiž stačí do jednotlivých částí formuláře doplnit potřebné třídy CSS a budeme mít po práci.

Do hlavičky stránky nejprve doplňte odkazy na JavaScript a CSS pro Twitter Bootstrap. Můžete jej stáhnout ke svému projektu a uvést relativní cesty, nebo použít některé CDN, jako v mém příkladu.

Pro formulář jsem doplnil třídu well, pro jednotlivá políčka pak třídu input-xlarge. Pro tlačítka použijte třídu btn, pro odesílací tlačítko ještě třídu btn-primary. Tlačítka vložte do DIVu se třídou form-actions.

<!DOCTYPE html>
<html lang="cs">
  <head>
    <meta charset="utf-8">
    <title>Ukázka validace formulářů</title>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
    <style>
      body { padding: 60px; }
      form{  width: 300px; }
    </style>
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
  </head>

  <body>

  <form action="zpracuj.php" method="post" class="well" id="formular">
    <label for="jmeno">Vaše jméno</label><input type="text" name="jmeno" class="input-xlarge" />
    <label for="kontakt">Kontaktní telefon nebo e-mail</label><input type="text" name="kontakt"  class="input-xlarge"/>
    <label for="vzkaz">Vzkaz</label><textarea name="vzkaz" class="input-xlarge"></textarea>
    <div class="form-actions">
     <input type="submit" value="Odeslat zprávu" class="btn btn-primary">
     <input type="reset" value="Vyprádznit" class="btn">
    </div>
  </form>



  </body>
</html>

Výsledný vzhled formuláře je díky těmto málo úpravám mnohem hezčí a jak jste viděli, s minimem práce.

Dokumentaci k Twitter Bootstrap najdete na jeho webu, případně doporučuji také knížku Twitter Bootstrap Web Development How-To.

Ověřování, zda jsou pole formuláře vyplněna

Nyní si doplníme validaci hodnot ve formulářových polí. Dlužno zmínit, že toto věření je jen kvůli většímu komfortu pro uživatele, nikoli kvůli ošetření vstupu dat jako takových. Kdo bude chtít odeslat formulář bez vyplnění políček, pak si samozřejmě vypne JavaScript a učiní tak. Proto byste měli ověření dat provést i ve skriptu, který na serveru data z formuláře zpracovává (v našem případě v souboru zpracuj.php).

Každopádně ověření dat na uživatelské straně zpracujeme pomocí pluginu do jQuery s výmluvným názvem Validation. Do hlavičky stránky doplníme odkazy na jQuery a na validační plugin. Opět, je na vás, zda si je stáhnete ke svému projektu nebo budete načítat z CDN.

Políčka, u kterých chcete kontrolovat, zda jsou vyplněna, označte třídou required. Poté doplňte konstrukci jQuery, která po načtení stránky nastaví text chybového hlášení a následně navěsí ověřování k vybranému formuláři. Pracujete se standardním selektorem, v našem případě id formular.

Nyní můžete vyzkoušet, že formulář při nevyplněných hodnotách a kliknutí na odesílací tlačítko nic nezpracuje a jen pod nevyplněnými políčky přidá chybové hlášení. Všimněte si, že jsou to značky label se třídou error, stejnou třídu pak dostanou samotná nevyplněná políčka. Doplníme jim tedy ještě červené zvýraznění do našich stylů.

Výsledný kód by měl vypadat takto:

<!DOCTYPE html>
<html lang="cs">
  <head>
    <meta charset="utf-8">
    <title>Ukázka validace formulářů</title>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
    <style>
      body { padding: 60px; }
      form{  width: 300px; }
      input.error, textarea.error { border: 1px solid red; }
      label.error { color: red; text-align: right; }
    </style>
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
    <script>
    (function ($) { 
      jQuery(document).ready(function () { 
        jQuery.extend(jQuery.validator.messages, { required: "vyplňte políčko" });
        $("#formular").validate();        
      });      
    }(jQuery));
    </script>
  </head>

  <body>

  <form action="zpracuj.php" method="post" class="well" id="formular">
    <label for="jmeno">Vaše jméno</label><input type="text" name="jmeno" class="input-xlarge required" />
    <label for="kontakt">Kontaktní telefon nebo e-mail</label><input type="text" name="kontakt"  class="input-xlarge required"/>
    <label for="vzkaz">Vzkaz</label><textarea name="vzkaz" class="input-xlarge required"></textarea>
    <div class="form-actions">
     <input type="submit" value="Odeslat zprávu" class="btn btn-primary">
     <input type="reset" value="Vyprádznit" class="btn">
    </div>
  </form>

  </body>
</html>

Vzhled formuláře následovně:

V podrobné dokumentaci k pluginu Validation najdete samozřejmě i příklady podrobnějšího ověřování políček formuláře, nikoli jen toho, zda jsou vyplněna.

AJAXové zpracování a zobrazení reakce na vyplněný formulář

Zbývá už jen zpracovat data z formuláře a uživateli zobrazit informaci o tom, že jsme data obdrželi. Pro zachování jednoduchosti článku zde nebudu řešit žádnou manipulaci s daty na straně serveru. Skript zpracuj.php, který formulář volá, obsahuje pouze výpis hlášení doplněný o značku DIV s třídami pro Twitter Bootstrap.

<?php
  // kontrola dat
  
  // zpracování dat
  
  // poděkování
  echo '<div class="alert alert-info">Děkujeme za zprávu, budeme vás kontaktovat.</div>';
?>

Pokud nyní formulář odešlete, pak se zobrazí jen nenastylovaný text, tak jak jej zpracuj.php generuje. Formulář si ale upravíme tak, aby se nová stránka nenačítala a tato hláška aby se zobrazila pod tlačítky formuláře.

Pod tlačítka tedy doplňte DIV s id response. Bude sloužit jako kontejner pro zobrazenou hlášku, standardně bude prázdný a tudíž se na webu nijak nezobrazí. Pro AJAXové zpracování formuláře využijeme jQuery Form Plugin. Zase jej napojíme do hlavičky stránky. Do konstrukce jQuery volané po načtení stránky doplníme hned za navěšení validace ještě příkaz k tomu, aby byl formulář zpracován AJAXově.

Všimněte si, že je to opět velmi jednoduché. Pomocí identifikátoru a ajaxForm() nastavíme konkrétní formulář, parametrem target pak ještě určíme, že výstup ze skriptu zpracovávajícího formulář se má objevit v kontejneru s id response.

<!DOCTYPE html>
<html lang="cs">
  <head>
    <meta charset="utf-8">
    <title>Ukázka validace formulářů</title>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
    <style>
      body { padding: 60px; }
      form{  width: 300px; }
      input.error, textarea.error { border: 1px solid red; }
      label.error { color: red; text-align: right; }
    </style>
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>
    <script>
    (function ($) { 
      jQuery(document).ready(function () { 
        jQuery.extend(jQuery.validator.messages, { required: "vyplňte políčko" });
        $("#formular").validate();
        $('#formular').ajaxForm({
          'target':'#response'
        });        
      });      
    }(jQuery));
    </script>
  </head>

  <body>

  <form action="zpracuj.php" method="post" class="well" id="formular">
    <label for="jmeno">Vaše jméno</label><input type="text" name="jmeno" class="input-xlarge required" />
    <label for="kontakt">Kontaktní telefon nebo e-mail</label><input type="text" name="kontakt"  class="input-xlarge required"/>
    <label for="vzkaz">Vzkaz</label><textarea name="vzkaz" class="input-xlarge required"></textarea>
    <div class="form-actions">
     <input type="submit" value="Odeslat zprávu" class="btn btn-primary">
     <input type="reset" value="Vyprádznit" class="btn">
    </div>
    <div id="response">
  	     
	</div> 
  </form>

  </body>
</html>

A to je vše. Formulář bude po odeslání dat vypadat následovně:

Poznámka na konec: s frameworky to nepřehánějte

Použití nejrůznějších doplňkových knihoven a frameworků samozřejmě zvyšuje objem dat, která se spolu se stránkou musí do prohlížeče načíst. Podotýkám tedy, že jejich použití má smysl hlavně u větších projektů nebo tam, kde vám to prostě nevadí.

Příloha	Velikost
formular-validace-ajax.zip	1.14 KB

Tagy

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal, WordPress a Symfony. Acquia Certified Developer & Site Builder. Autor několika knih o Drupalu.
Marketing Director v Lesensky.cz. Ve volných chvílích podnikám výlety na souši i po vodě. Více se dozvíte na polzer.cz a mém LinkedIn profilu.

@maxiorel