TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
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.
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.
