Validácia formulárov pomocou jQuery

Kto vytváral formulár s väčším množstvom položiek mi dá za pravdu, že programovanie kontroly či už na strane servra alebo na strane klienta javascriptom zaberie pomerne veľa času. Tento čas sa dá ušetriť s jQuery pluginom na validáciu formulárov.

jQuery form validate je jednoduchý skript napísaný v jQuery, ktorý na základe pravidiel vo funkcii, či priamo v html tagoch kontroluje validitu vyplnených údajov. Pre každý prvok formulára sa dá samozrejme nastaviť povinnosť vyplneného poľa, aký typ poľa tj. číslo, text, regulárny výraz, webový odkaz, e-mail a pod. Užitočnou funkciou je aj porovnanie hodnoty s iným elementom (vhodné pre overenie zadaného hesla) či vzdialená validácia. Vzdialená validácia znamená porovnávať hodnotu elementu s dynamicky získanými dátami. Príkadom môže byť overenie dostupnosti prihlasovacieho mena.

Pripravil som si pre Vás jednoduchý príklad: registračný formulár, do ktorého budeme zadávať používateľské meno - využijeme vzdialenú validáciu, skutočné meno a priezvisko, heslo, overenie hesla - validácia porovnaním dvoch hodnôt, e-mail a nejaký nepovinný údaj, napr webový odkaz, ktorý tiež skontrolujeme.

Pre validáciu všeobecne nám stačí nasledujúci kúsok kódu:

$('form').validate();

Tento skript nám zabezpečí validáciu každého formulára. Povinnosť resp. nepovinnosť vyplnenia formulárového poľa označíme jednoducho triedou "required".

Pre bližšiu špecifikáciu poľa môžeme použiť funkcie v tele funkcie. Poďme rovno na náš príklad:

    $(function() {
      $('#registracia').validate({
        rules:{
          hesloznovu:{
            equalTo: $('#heslo')
          },
          username:{
            minlength: 3,
            remote: {
              url: 'check-username.php',
              type: 'post',
              data: {
                username: function(){
                  return $('#username').val();
                }
              }
            }
          }
        },
        messages:{
          username:{
            remote: 'Toto používateľské meno nemôžete použiť!'
          }
        }
      });
    });

V našom príklade, všetky povinné polia majú triedu required, url adresa triedu url a e-mail triedu email a required čo nám zabezpečí základnú validáciu. Pole pre opätovné zadanie hesla je jednoducho overené metódou equalTo.

Mierne zložitejšia je časť vzdialenej validácie používateľského mena. Metóda remote zabezpečí vzdialené volané skriptu check-username.php, ktorý na základe údajov získaných cez POST vráti true ak je používateľské meno voľné a použiteľné pri registrácii prípadne false ak sa už medzi použítými používateľskými menami nachádza.

$valid = 'true';
$username_arr = array('admin','ivan','john','peter','milan');

if(in_array($_POST['username'],$username_arr))
  $valid = 'false';

echo $valid;

Horeuvedený php skript vráti iba textovú hodnotu true alebo false.

Funkčnú verziu príkladu si môžeme pozrieť na http://www.ivan-sulek.tk/demos/validate/