Zru╣enφ odesφlßnφ formulß°e

javascriptem

Nejjednodu╣╣φ p°φklad - N∞kdy odeslat, n∞kdy ne - Kontrola dat - Cel² funkΦnφ p°φklad

ServerovΘ skripty p°ijφmajφ data z formulß°∙. Velk² objem vstupnφch dat b²vß n∞jak²m zp∙sobem chybn². Chybu m∙╛e odhalit a╛ server, ale v tom p°φpad∞ se zbyteΦn∞ p°enß╣ejφ data a Φekß se na chybovou strßnku. Lep╣φ je odchytßvat chyby u╛ na klientovi a ╣patn∞ vypln∞n² formulß° prost∞ nenechat odeslat.

Pokud si chcete prostudovat hotov² p°φklad, je na konci. Tento text vyklßdß teorii krok za krokem.

Nejjednodu╣╣φ p°φklad

<form action="nejaky_serverovy_skript" onsubmit="return false">
<input type="submit" value="odeslat">
</form>

Takhle to vypadß v dokumentu:

Formulß° nejde odeslat, proto╛e je p°ed odeslßnφm odesφlßnφ zru╣eno.

Ka╛d² formulß° p°i odesφlßnφ vyvolß udßlost onsubmit. Ta se provede je╣t∞ p°ed tφm, ne╛ se data ode╣lou na server (aneb ne╛ se provede action).

Udßlost onsubmit m∙╛e:

• b²t navßzßna na skript, nap°. onsubmit="alert('odesφlßm data')" (to je jenom takovß blb∙stka)
• nebo na funkci nap°. onsubmit="udelejNeco()", kde udelejNeco() je normßlnφ p°edem deklarovanß javascriptovß funkce,
• m∙╛e takΘ dostat nßvratovou hodnotu, nap°. onsubmit="return false" nebo onsubmit="return true", tφm se odesφlßnφ m∙╛e zru╣it
• a m∙╛e se to kombinovat, to popφ╣u nφ╛e

N∞kdy zru╣it, n∞kdy ne

V²╣e uveden² p°φklad, ve kterΘm je onsubmit="return false", je k niΦemu, proto╛e se to neode╣le nikdy. Je pot°eba um∞t to n∞jak rozli╣it. Dejme tomu, ze v prom∞nnΘ vseVPoradku budu mφt ulo╛enu informaci o tom, jestli se to mß odeslat nebo ne (zatφm je jedno jak ji zφskßm) a bude dosahovat hodnot true a false. Symbolicky se to dß zapsat:

<form ... onsubmit="return vseVPoradku">

To ale nenφ nejΦast∞j╣φ situace. NejΦast∞ji toti╛ informace nenφ ulo╛enß v prom∞nnΘ, ale je to funkce. Nazvu ji kontrolaDat(). Nejjednodu╣╣φ deklarace funkce kontrolaDat():

function kontrolaDat(){
    if (podminka) return true else return false
}

K formulaci podmφnky se je╣t∞ vrßtφm. D∙le╛itΘ je v╣imnout si, ╛e funkce mß nßvratovΘ hodnoty (return n∞co). Jinak °eΦeno funkce plive pravdu nebo nepravdu. Zru╣enφ formulß°e se potom provede provßzßnφm:

<form onsubmit="return kontrolaDat()">

Kontrola dat

V dal╣φm v²kladu budu pracovat s tφmto p°φkladem formulß°e, kontrolovat se bude email:

<form action="nejaky_serverovy_skript" onsubmit="return kontrolaDat()">
Zadejte email: <input type="text" name="email" value="">
<input type="submit" value="odeslat">
</form>

V╣imn∞te si prosφm, ╛e pole s emailem mß identifikaci name="email" a je prßzdnΘ (to je ta value=""). Oboje se pou╛ije ve skriptu. Takhle to vypadß:

Te∩ jde jen o to napsat sprßvn∞ funkci kontrolaDat().

Identifikace hodnoty

Aby se data mohla zkontrolovat, je pot°eba je nap°ed n∞jak poznat, zp°φstupnit. Jsou dva zp∙soby:

• p°es objekt document
• p°es objekt this

Pokud nenφ jasnΘ, na zßklad∞ jak²ch dat se bude rozli╣ovat o odeslßnφ nebo neodeslßnφ, je pot°eba pou╛φt objekt document. V n∞m identifikovat formulß° a jeho pole. Pφ╣u o tom v kapitole o adresovßnφ prvk∙ dokumentu.

To je v tomto p°φpad∞ asi zbyteΦn∞ komplikovanΘ. Jestli se formulß° ode╣le nebo ne, zßvisφ zpravidla na datech zadan²ch do toho formulß°e. Tak╛e si lze v praxi vystaΦit s objektem this. To je ten objekt, kter² vyvolal udßlost. V p°φpad∞ udßlosti onsubmit je this formulß°. Kdy╛ se zapφ╣e

<form onsubmit="kontrolaDat(this)">...

vφ javascript, ╛e funkce kontrolaDat dostala v hodnot∞ parametru vstup cel² formulß°. Z toho si funkce dal╣φ v∞ci u╛ vysosß.

Konstrukce funkce

Budu kontrolovat zatφm pouze to, zda se v zadanΘm emailu vyskytuje zavinßΦ @.

function kontrolaDat(vstup){
    zadanaHodnota = vstup.email.value; // naΦtena hodnota (value) z polφΦka s name=email
    if( zadanaHodnota.indexOf("@") = -1) // zavinßΦ se nevyskytuje
        return false
    else return true;
}

Nap°ed jsem si do prom∞nnΘ zadanaHodnota vytßhnul hodnotu (value) zadanou do pole email (name=email) danΘho formulß°e. Tam je to, co p°ed odeslßnφm zadal u╛ivatel jako sv∙j email.

Potom jsem pomocφ metody idexOf() zjistil, jakou pozici mß v °et∞zci zadanaHodnota znak zavinßΦe (indexOf("@")). Pokud tam zavinßΦ v∙bec nenφ, indexOf() vracφ mφnus jedniΦku (ne nulu, to by znamenalo, ╛e @ je na zaΦßtku, poΦφtß se to samoz°ejm∞ od nuly).

Pokud tedy vy╣lo, ╛e pozice zavinßΦe je mφnus prvnφ, zavinßΦ tam nenφ, nenφ to sprßvn² email a funkce plive false (nepravdu). V opaΦnΘm p°φpad∞ (else) plive pro po°ßdek true (pravdu). Celß podmφnka za if ( by se mohla napsat mnohem slo╛it∞ji ), ale to u╛ nenφ t°eba rozvßd∞t zde.

Cel² funkΦnφ p°φklad

Takhle by to mohlo fungovat. Souvisejφcφ v∞ci jsou vyznaΦeny stejnou barvou.

<script>
function kontrolaDat(vstup){
    zadanaHodnota = vstup.email.value; // naΦtena hodnota (value) z polφΦka s name=email
    if( zadanaHodnota.indexOf("@") == -1) // zavinßΦ se nevyskytuje
        {alert("neni zavinßΦ"); return false;}
    else return true;
}
</script>

<form action="nejaky_serverovy_skript" onsubmit="return kontrolaDat(this)">
   Zadejte email: <input type="text" name="email" value="">
    <input type="submit" value="odeslat">
</form>

RaΦte vyzkou╣et:

Poznßmka o metod∞ submit()

V javascriptu mß formulß° (objekt form) metodu submit(), kterß dovoluje odeslßnφ formulß°e bez toho, aby u╛ivatel stisknul potvrzovacφ tlaΦφtko. Pozor, v takovΘm p°φpad∞ neprob∞hne udßlost onSubmit.