Validace formuláře pomocí jQuery

Jak jedoduše zvalidovat formulář před odesláním za pomoci jQuery?

Kontrola toho co uživatel vyplnil do formuláře je nutná z mnoha ohledů. Jedním může být bezpečnost (různé snahy vložit do databáze nebezpečný kód, SQL dotaz atd..). Dalším může být například, že z položky očekáváme pouze čísla a s tím kalkulujeme i při tvorbě databáze. Pokud by nám z formuláře dorazily znaky tak máme problém.

Ukázka struktury kódu na validaci:

  //samotny obsah formulare
  

Pomocí jQuery se formulářové prvky v základu validují zda je v nich něco naplněno, či zvolena nějaká určitá hodnota a to takto:

1) Input:
if( $('input[name=jmeno_polozky]', 'form').val() == "" ){
  /*Pokud neni input vyplněn, tak vyvolej nějakou chybu. Logicky lze "if" rozšířit o podmínku, zda se daná hodnota nerovná něčemu co nechceme.*/
}
2) Textarea:
if( $('textarea[name=jmeno_polozky]', 'form').val() == "" ){
  /*Pokud neni textarea vyplněna, tak vyvolej nějakou chybu. Logicky lze "if" rozšířit o podmínku, zda se daná hodnota nerovná něčemu co nechceme.*/
}
3) Selectbox
if( $('select[name=jmeno_polozky] option:selected', 'form').val() == "vyberte hodnotu" ){
  /*Pokud je první položka selectboxu s hodnotou "vyberte hodnotu" a my chceme, aby uživatel něco vybral tak je potřebné porovnávat zvolenou hodnotu právě s možností "vyberte hodnotu".*/
}
4) Radiobutton
if( $('input[name=jmeno_polozky]:checked', 'form').val() == "vyberte hodnotu" ){
  /*Pokud je první položka skupiny radiobuttonů s hodnotou "vyberte hodnotu" a my chceme, aby uživatel něco vybral tak je potřebné porovnávat zvolenou hodnotu právě s možností "vyberte hodnotu".*/
}
5) Checkbox
if( $('input[name=jmeno_polozky]', 'form').is(":checked") ){
  /*Pokud je checkbox zakliknutý/zvolený, tak dostaneme hodnou "true" jinak "false".*/
}

Toto je úplný základ. Je zřejmé, že hlavně u inputu je validace na to, zda máme/nemáme vyplněno sice hezká, ale je to v mnoha případech málo. Například pokud chceme po uživateli e-mail, který si následně vezmeme z formuláře a použijeme tuto hodnotu pro odeslání dat z formuláře a uživatel nám do kolonky napíše "123" místo "jmeno@seznam.cz", tak máme problém. Cesta je použít regulární výrazy (zkráceně RegEx).

Seznam funkčních výrazů zní:

1) Telefon
vyraz = /^(+[0-9]{1,3})?( )?[0-9]{3}( )?[0-9]{3}( )?[0-9]{3}$/;
//Nepovinná předvolba s "+" na počátku následovaná 1-3 číslicemi ; dále je vyžadováno právě 9 číslic, kdy je možné po každé 3.číslici dát mezeru.
2) E-mail
vyraz = new RegExp("^[^.]+(.[^.]+)*@([^.]+[.])+[a-z]{2,4}$");
3) Datum
vyraz = /^(?:(?:31(/|-|.)(?:0?[13578]|1[02]))1|(?:(?:29|30)(/|-|.)(?:0?[1,3-9]|1[0-2])2))(?:(?:1[6-9]|[2-9]d)?d{2})$|^(?:29(/|-|.)0?23(?:(?:(?:1[6-9]|[2-9]d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1d|2[0-8])(/|-|.)(?:(?:0?[1-9])|(?:1[0-2]))4(?:(?:1[6-9]|[2-9]d)?d{2})$/;
//formaty: dd/mm/yyyy NEBO dd-mm-yyyy  NEBO  dd.mm.yyyy ; resi prestupne roky i delky jednotlivych mesicu
4) PSČ
vyraz = /^d{3} ?d{2}$/;
//povoluj zápisy 123 45 nebo 12345
5) pouze čísla
vyraz = /^(0|[1-9][0-9]*)$/;
//Pokud uživatel napíše něco jiného jak číslici, tak chyba.

Jak tyto výrazy použít v podmínce?

if(!vyraz.test(hodnota_polozky)){
 //uživatel nenapsal hodnoty dobře tudíž vyvoláme chybovou hlášku
}

S psaním různých regulárních výrazů je mnohdy zábava a jindy to prostě nejde a je to "k vzteku", ale výše zmíněné výrazy na mnoho situací postačí. Pro případné bádání jak výraz napsat a otestovat doporučuji web http://regexr.com

Závěrem bych zmínil, že každý uživatel má možnost si v prohlížeči vypnout Javascript tudíž je nutné nezapomínat na další část validace a to přez PHP. Tuto kontrolu provedeme před samotným uložením do databáze, či před odesláním e-mailu.

<< zpět