jQuery plugin Validation - plugin pro snadnou kontrolu formulářů
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

jQuery plugin Validation - plugin pro snadnou kontrolu formulářůjQuery plugin Validation - plugin pro snadnou kontrolu formulářů

 

jQuery plugin Validation - plugin pro snadnou kontrolu formulářů

Google       Google       17. 9. 2009       40 617×

V tomto článku bych chtěl čtenáře seznámit s pluginem Validation pro javascriptovou knihovnu jQuery. Plugin je velmi užitečný pro všechny webové aplikace obsahující formuláře.

Reklama
Reklama

Validace formulářů je velmi důležitá a také rutinní činnost, s kterou se potkal každý vývojář webových aplikací. Nejčastěji se provádí ve dvou krocích, nejprve na straně klienta, většinou pomocí Javascriptu, a poté na straně serveru. V tomto článku bych chtěl ukázat, jak lze zjednodušit validaci formuláře na straně klienta s pomocí pluginu Validation pro javascriptovou knihovnu jQuery.

Jak začít

Předpokládám, že knihovnu jQuery už máte stáhnutou na svém počítači, plugin Validation najdete na této adrese. V archivu naleznete plugin v několika verzích. Pro ostré nasazení je nejvýhodnější soubor jquery.validate.pack.js. V adresáři localization jsou obsaženy soubory s překladem chybových hlášení pro několik jazyků, najdeme mezi nimi i češtinu (messages_cs.js).

Pro vlastní nasazení je vhodné zkopírovat soubory jquery.validate.pack.js a messages_cs.js do jedné složky na webu a nalinkovat je spolu s knihovnou jQuery v HTML hlavičce.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.pack.js"></script>
<script type="text/javascript" src="messages_cs.js"></script>

Ukázky použití

Použití pluginu je velmi jednoduché. Stačí mu říct, jaké hodnoty chceme, aby uživatel zadal do jednotlivých polí formuláře. To je možné buď pomocí atributu class v HTML kódu, nebo pomocí definice validačních pravidel v javascriptovém kódu. Nejdříve se podíváme na první možnost.

Předpokládejme, že máme jednoduchý formulář.

<form id="test1" action="" method="post">
<fieldset>
   <legend>Vložení komentáře</legend>
   <p>
     <label for="jmeno">Jméno</label>
     <em>*</em><input id="jmeno" name="jmeno" size="25" class="required" minlength="2">
   </p>
   <p>
     <label for="email">Email</label>
     <em>*</em><input id="email" name="email" size="25"  class="required email">
   </p>
   <p>
     <label for="url">URL</label>
     <em>  </em><input id="url" name="url" size="25"  class="url">
   </p>
   <p>
     <label for="text">Komentář</label>
     <em>*</em><textarea id="text" name="text" cols="22"  class="required"></textarea>
   </p>
   <p>
     <input class="submit" type="submit" value="Odeslat">
   </p>
 </fieldset>
</form>

Instrukce pro validaci formuláře najdeme v definici jednotlivých prvků formuláře. Pokud prvku přiřadíme třídu required, zařadíme ho mezi povinné položky, pomocí atributu minlength můžeme snadno specifikovat minimální počet zadaných znaků. V případě e-mailové adresy použijeme příznak email a pro adresu webu příznak url. Tyto příznaky můžeme i kombinovat, pokud musí být e-mailová adresa zadána povinně, použijeme deklaraci class="required email".

Nyní máme nadefinovaná pravidla pro jednotlivá pole a už musíme jen říct, který formulář chceme validovat. K tomu stačí pár řádek kódu. Můžeme si zároveň i nastylovat text chybových hlášení.

<style type="text/css">
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
</style>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#test1").validate();
  });
  </script>

Příklad si můžete vyzkoušet zde.

Tento způsob zápisu parametrů pro validaci je jednoduchý, ale ne vždy použitelný. Univerzálnější je zápis pomocí Javascriptu. Definice podmínek pro stejný formulář by vypadala takto:

<script type="text/javascript">
  $(document).ready(function(){
    $("#test2").validate({
    rules: {
      jmeno: {
        required: true,
        minlength: 2
      },
      email: {
        required: true,
        email: true
      },
      url: {
        url: true
      },
      text: {
        required: true
      }
      }
    });
  });
  </script>

Příklad si můžete vyzkoušet zde.

Závěr

Plugin Validation je velmi užitečný pro kontrolu dat zadávaných uživateli. Nezanedbatelnou výhodou je snadná lokalizace, a tím i jeho použití ve vícejazyčných aplikacích. Nesmíme ale zapomenout na fakt, že tato validace není stoprocentně spolehlivá, vždy je nutné provádět ověření zadaných dat i na straně serveru.

Plugin je chráněn licencemi MIT a GPL.

Odkazy

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
0 hlasů
Google
(fotka) Zdeněk MoravecAutor se pohybuje v oblasti vývoje nových materiálů. Mezi jeho koníčky patří tvorba webových aplikací, programování v jazycích Java, .NET (C#), Perl, elektronika a sport (běh). Hojně využívá sázecí systém LaTeX.
Web     Facebook    

Nové články

Obrázek ke článku NEWTON Media prohledá 200  milionů mediálních zpráv během sekund díky Cisco UCS

NEWTON Media prohledá 200 milionů mediálních zpráv během sekund díky Cisco UCS

Česká společnost NEWTON Media provozuje největší archiv mediálních zpráv ve střední a východní Evropě. Mezi její zákazníky patří například ministerstva, evropské instituce nebo komerční firmy z nejrůznějších oborů. NEWTON Media rozesílá svým zákazníkům každý den monitoring médií podle nastavených klíčových slov a nabízí online službu, kde lze vyhledat mediální výstupy v plném znění od roku 1996.

Reklama
Reklama
Obrázek ke článku Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Touto roční dobou, kdy je zem pokrytá barevným listím a prsty křehnou v mrazivých ránech, se obvykle těšíme na zbrusu novou verzi RAD Studia. Letos si však ale budeme muset počkat na Godzillu a Linux až do jara. Vezměme tedy za vděk alespoň updatem 2 a jelikož dle vyjádření pánů z Embarcadero se budou nové věci objevovat průběžně, pojďme se na to tedy podívat.

Obrázek ke článku Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Stále rostoucí zájem o cloudové služby i maximální důraz na pružnost, spolehlivost a bezpečnost IT vedou k výrazným inovacím v datových centrech. V infrastruktuře datových center hraje stále významnější roli software a stále častěji se lze setkat s hybridními přístupy k jejich budování i provozu.

Obrázek ke článku Konference: Mobilní technologie mají velký potenciál pro byznys

Konference: Mobilní technologie mají velký potenciál pro byznys

Firmy by se podle analytiků společnosti Gartner měly  rychle přizpůsobit skutečnosti, že mobilní technologie už zdaleka nejsou horkou novinkou, ale standardní součástí byznysu. I přesto - nebo možná právě proto - tu nabízejí velký potenciál. Kde tedy jsou ty největší příležitosti? I tomu se bude věnovat již čtvrtý ročník úspěšné konference Mobilní řešení pro business.

Reklama autora

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý