Validace formuláře pomocí jQuery

Validaci formuláře lze zajistit bez zbytečného programování pomocí pluginu Validation pro jQuery. Domovská stránka pluginu je http://bassistance.de/jquery-plugins/jquery-plugin-validation/.

Základní kód nutný pro validaci je následující:

<script type="text/javascript" language="JavaScript1.2" src="./stranky/inc/jquery.validate.pack.js"></script>
<script>
$(document).ready(function(){
   $("#form").validate({
       errorPlacement: function(error, element) {
       if (element.parent("td").parent("tr").next("tr").children(".poznamka").length)
          error.prependTo( element.parent("td").parent("tr").next("tr").children(".poznamka") );
       else
          error.prependTo( element.parent("td").parent("tr").parent("tbody").parent("table").parent("td").parent("tr").next("tr").children(".poznamka") );
      }
    })

 });
 </script>
form action="formular.php" id="form" method="post">
<table>
<tr><td>Položka</td><td><input type="text" name="input" value="" class="required email"/></td></tr>
<tr><td></td><td class="poznamka"></td></tr>
<tr><td colspan="2"><input type="submit" value="Odeslat"/></td></tr>
</table>
</form>

Při odeslání formuláře bude tento zvalidován a input bude zkontrolován zda je vyplněn (required) a zda obsahuje platnou emailovou adresu (email). Velice jednoduché, že? :) V obslužném JavaScriptu je parametr errorPlacement, v tomto případě se podle toho, zda jde o daný způsob vykreslení formuláře (v tabulce), zobrazí chyba v buňce třídy poznamka.

Takto lze poměrně jednoduše docílit spolehlivé validace formuláře bez nutnosti vymýšlet a programovat konkrétní validační funkce.

1 komentář u „Validace formuláře pomocí jQuery

  1. Kubicq

    Potřebuji poradit s validací jednoho formuláře. Kromě jiného mám ve formuláři tři textové inputy. Formulář se může odeslat, pokud je vyplněno? 1) pole 1,2,3 nebo alespoň 2) pole 1 a 2 (s důrazem na 2), nebo 3) pole 3. Podmínka je vlastně jednodušší. Pokud je pole 2 a 3 prázdné, formulář se neodešle. Jak na to? Děkuji

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Můžete používat následující HTML značky a atributy: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>