4. října 2007

Velmi jednoduchá validace HTML formulářů JavaScriptem

Dneska mi padla do oka velmi jednoduchá knihovnička na validování HTMl formulářů pomocí JavaScriptu - JSValidate. V podstatě bych řekl, že se mi víc líbí nápad, jak jsou položky formuláře označovány na co mají být validovány, než samotná knihovna, protože obsahuje validaci pouze JavaScriptem, tj. na klientu, a to je pro mě málo.
A co je to tedy za nápad? Prostě a jednoduše položky formuláře, tj. input tagy označíte CSS třídou podle toho, jak jej chcete validovat a přidáte následující 3 řádky na začátek stránky:

<script type="text/javascript" language="javascript" src="scriptaculous/lib/prototype.js"></script>
<script type="text/javascript" language="javascript" src="scriptaculous/src/scriptaculous.js"></script>
<script type="text/javascript" language="javascript" src="jsvalidate.js"></script>
A jste hotovy.

Příklady

Jednoduchá položka, jejíž hodnota je povinná:
<input type="text" name="name" class="jsrequired" />

Nebo položka pro číslo:
<input type="text" name="number" class="jsvalidate_number" />
A nebo položka na email, který je nutné zadat:
<input type="text" name="email" class="jsrequired jsvalidate_email" />

Jaké jsou dostupné třídy

  • jsrequired - musí být vyplněna
  • jsvalidate_number - číslo
  • jsvalidate_digits - pouze číslice
  • jsvalidate_alpha - pouze písmena
  • jsvalidate_alphanum - písmena, číslice a podtržítko
  • jsvalidate_email - email
  • jsvalidate_uscanzip - ZIP code USA nebo Kanady
  • jsvalidate_usstate - 2 znakový kód státu v USA
  • jsvalidate_usphone - telefonní číslo v USA
  • jsvalidate_creditcard - číslo kreditní karty
  • jsvalidate_ssn - Social Security Number - číslo sociálního pojištění (USA)
  • select-notfirst - používá se u selectů, kde zajistí, že první položka ze seznamu nemůže být vybrána

Závěr

Myslím, že existuje problém, kde se tato knihovná dá nasadit. Asi to nebude do žádné větší aplikace, kde bude na validační framework kladen podstatně větší nárok, především mám na mysli prováznost s validací na serveru.
Co se mi jeví jako hodně zajímavé je využití CSS tříd pro identifikaci, to je velmi jednoduché a elegantní.

Odkazy

Žádné komentáře: