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

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

 
Hledat
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Laser Game Ostrava

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

Google       Google       17. 9. 2009       45 320×

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 Konference: Moderní informační systémy podporují automatizaci

Konference: Moderní informační systémy podporují automatizaci

Současná situace v šíření onemocnění Covid-19 klade na řadu firem nové nároky a mnohé z nich jsou nyní více než kdy jindy závislé na nejmodernějších informačních technologiích. Proto i v oblasti podnikových informačních systémů vidíme rostoucí důraz na automatizaci nebo na důslednou integraci. Také o těchto trendech se bude mluvit na konferenci Firemní informační systémy, která se koná 24.9.2020 v pražském Kongresovém centru Vavruška na Karlově náměstí.

Reklama
Reklama
Obrázek ke článku Nebezpečí ukrytá v USB: z nuly na škvarek za pět sekund

Nebezpečí ukrytá v USB: z nuly na škvarek za pět sekund

Za cenu šesti dolarů lze celkem bez obtíží koupit nový, líbivě vyhlížející flash disk. Přidaná hodnota, které se vám spolu s ním dostane, už tak moc líbivá není. To, co se před pár sekundami tvářilo jako externí disk, se po připojení k počítači změní v důmyslné elektrické křeslo, které vaše zařízení v onen příslovečný škvarek promění za pár sekund. Cílovou skupinou pro koupi takových zařízení by mohli být záškodníci, kteří by tímto způsobem osnovali pomstu třeba vůči záletnému partnerovi. 

Obrázek ke článku Znalosti, dovednosti i prestižní titul MBA: Jde to i moderně a online

Znalosti, dovednosti i prestižní titul MBA: Jde to i moderně a online

Snad nikdy není špatná příležitost na investici do hodnotného vzdělání. Obzvlášť v případě, že absolvent dovede teoretické poznatky přetavit v praktické dovednosti, využitelné při řešení problémů i v komunikaci. Právě na to se specializuje studijní program MBA Řízení informačních technologií, vyučovaný na Business Institutu.

Obrázek ke článku Coding Bootcamp Praha: Obor IT krize nepoznamenala, žádaní jsou weboví vývojáři

Coding Bootcamp Praha: Obor IT krize nepoznamenala, žádaní jsou weboví vývojáři

Pandemie Covid-19 otřásla trhem práce v základech. Dopady krize pocítilo celkově až 45 % zaměstnanců. Není divu, že čím dál větší jistotu přináší obor IT. Ten zůstal krizí téměř nepoznamenán a při nutnosti začít dělat věci na dálku se ještě více ukázalo, jak moc mnohé firmy kvalitní IT potřebují. Do IT nyní přicházejí začátečníci, kteří v něm vidí lukrativní budoucnost a jistotu, ale i freelanceři a zaměstnanci z oborů zasažených krizí

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032020 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý