Vyberte volbu Vložit > Spry > Ověření textového pole Spry.
Naposledy aktualizováno
19. 5. 2021
Poznámka:
Widgety Spry jsou v aplikaci Dreamweaver CC a novější nahrazeny widgety jQuery. Stávající widgety Spry na stránce sice můžete upravit, ale nemůžete přidávat nové.
O widgetu Ověření textového pole
widget Ověření textového pole Spry je textové pole, které ve chvíli, kdy návštěvník webu zadá text, zobrazí platný nebo neplatný stav. widget Ověření textového pole můžete například přidat do formuláře, do něhož návštěvníci zapisují své e-mailové adresy. Pokud zapomenou v e-mailové adrese napsat symbol „@“ a tečku, widget vrátí zprávu, že je zadaná informace neplatná.
Následující příklady zobrazují widget Ověření textového pole v různých stavech:
A. widget Textové pole s aktivovanou nápovědou B. widget Textové pole, platný stav C. widget Textové pole, neplatný stav D. widget Textové pole, stav Vyžadováno
widget Ověření textového pole obsahuje řadu stavů (například platný, neplatný, vyžadovaná hodnota apod.). Vlastnosti těchto stavů můžete změnit pomocí inspektoru Vlastnosti s ohledem na požadované výsledky ověřování. widget Ověření textového pole může ověřovat v různých okamžicích – například, když návštěvník klepne mimo widget, když píše nebo když zkouší odeslat formulář.
Počáteční stav
Stav widgetu, když se stránka načte do prohlížeče nebo když uživatel obnoví formulář.
Stav aktivace
Stav widgetu, když uživatel umístí textový kurzor do widgetu.
Platný stav
Stav widgetu, když uživatel zadal informace správně a formulář může odeslat.
Neplatný stav
Stav widgetu, když uživatel zadal informace v neplatném formátu. (Například rok 06 místo 2006).
Stav Vyžadováno
Stav widgetu, pokud uživatel nezadal požadovaný text do textového pole.
Stav Minimální počet znaků
Stav widgetu, když uživatel zadal do textového pole méně znaků, než je požadovaný minimální počet.
Stav Maximální počet znaků
Stav widgetu, když uživatel zadal do textového pole více znaků, než je maximální povolený počet.
Stav Minimální hodnota
Stav widgetu, když uživatel zadal hodnotu, která je nižší, než je hodnota textovým polem vyžadovaná. (Vztahuje se na typ ověření celé číslo, reálné číslo a datum.)
Stav Maximální hodnota
Stav widgetu, když uživatel zadal hodnotu, která je vyšší, než maximální hodnota povolená textovým polem. (Vztahuje se na typ ověření celé číslo, reálné číslo a datum.)
Jakmile widget Ověření textového pole vstoupí do jednoho z těchto stavů prostřednictvím uživatelské interakce, logika frameworku Spry aplikuje za běhu specifickou třídu CSS na kontejner HTML widgetu. Pokud uživatel zkusí například odeslat formulář, ale do vyžadovaného textového pole nezadal žádný text, Spry aplikuje na widget třídu, která vyvolá zobrazení chybové zprávy „Je vyžadována hodnota“. Pravidla, která určují styl a zobrazují stavy chybových zpráv, jsou umístěna v souboru CSS (SpryValidationTextField.css), který doprovází widget.
Standardní HTML pro widget Ověření textového pole (obvykle ve formuláři) obsahuje tag kontejneru <span>, který obklopuje tag <input> textového pole. HTML pro widget Ověření textového pole obsahuje v hlavičce dokumentu a za HTML widgetu také tagy skriptu.
Podrobnější vysvětlení činnosti widgetu Ověření textového pole, včetně úplné struktury jeho kódu, najdete na adrese www.adobe.com/go/learn_dw_sprytextfield_cz.
Vložení a úpravy widgetu Ověření textového pole
Vložení widgetu Ověření textového pole
-
-
Vyplňte dialogové okno Atributy tagu vstupu pro usnadnění přístupu a klepněte na tlačítko OK.
Poznámka:
widget Ověření textového pole můžete vložit také pomocí kategorie Spry na panelu Vložit.
Určení typu a formátu ověření
Pro widget Ověření textového pole můžete určit různé typy ověření. Můžete například určit typ ověření platebních karet, pokud bude textové pole sloužit ke vkládání jejich čísel.
-
V okně dokumentu vyberte widget Ověření textového pole.
-
V inspektoru Vlastnosti (Okna > Vlastnosti) vyberte typ ověření z nabídky Text.
-
V případě potřeby vyberte z rozbalovací nabídky formátů formát souboru.
Většina ověřovacích typů nastavuje, že textové pole očekává standardní formát. Pokud například použijete na textové pole typ ověření celé číslo, widget neprovede ověření, dokud uživatel do textového pole nezadá číslice. Některé ověřovací typy vás ale nechají zvolit typ formátu, který bude textové pole akceptovat. Následující tabulka uvádí seznam ověřovacích typů a formátů, které jsou dostupné prostřednictvím inspektoru Vlastnosti:
Typ ověření |
Formát |
|---|---|
Žádné |
Konkrétní formát není vyžadován. |
Celé číslo |
Textové pole akceptuje pouze čísla. |
E-mailová adresa |
Textové pole akceptuje e-mailové adresy obsahující @ a tečku (.), před kterými a za kterými je nejméně jedno písmeno. |
Datum |
Různé formáty. Výběr nastavte v rozbalovací nabídce Formát v inspektoru Vlastnosti. |
Čas |
Různé formáty. Výběr nastavte v rozbalovací nabídce Formát v inspektoru Vlastnosti. („tt“ je formát am/pm, „t“ představuje formát a/p). |
Platební karta |
Různé formáty. Výběr nastavte v rozbalovací nabídce Formát v inspektoru Vlastnosti. Můžete zvolit příjem všech kreditních karet, nebo určit konkrétní druh kreditní karty (MasterCard, Visa, atp.). Textové pole neakceptuje v číslech platebních karet mezery, například 4321 3456 4567 4567. |
Směrovací číslo |
Různé formáty. Výběr nastavte v rozbalovací nabídce Formát v inspektoru Vlastnosti. |
Telefonní číslo |
Textové pole akceptuje telefonní čísla s formátem pro USA a Kanadu (000) 000-0000 nebo vlastní formáty. Pokud si jako volbu vyberete vlastní formát, zadejte ho (například 000,00(00)) do textového pole Vzorek. |
Číslo sociálního pojištění |
Textové pole umožňuje zadání čísla sociálního pojištění ve formátu 000-00-0000. Chcete-li používat jiný formát, vyberte jako typ ověření volbu Vlastní a zadejte vzorec. Mechanismus ověření vzorce umožňuje zadání pouze znaků ASCII. |
Měna |
Textové pole akceptuje měnu s formátem 1,000,000.00 nebo 1 000 000,00. |
Reálná čísla/Vědecký zápis |
Ověřuje různé druhy čísel: celá čísla (například 1); plovoucí hodnoty (například 12,123); a plovoucí hodnoty ve vědeckém zápisu (například 1,212e+12, 1,221e-12, kde e slouží jako exponent 10). |
Adresa IP |
Různé formáty. Výběr nastavte v rozbalovací nabídce Formát v inspektoru Vlastnosti. |
URL |
Textové pole akceptuje adresu URL s formátem http://xxx.xxx.xxx nebo ftp://xxx.xxx.xxx. |
Vlastní |
Umožňuje specifikovat vlastní typ a formát ověření. V inspektoru Vlastnosti zadejte vzorek formátu (v případě potřeby společně s nápovědou). Mechanismus ověření vzorce umožňuje zadání pouze znaků ASCII. |
Určení, kdy proběhne ověření
Okamžik, ve kterém proběhne ověření, můžete nastavit – když návštěvník webu klikne mimo widget, když návštěvník zapisuje nebo když zkouší odeslat formulář.
-
V okně dokumentu vyberte widget Ověření textového pole.
-
V inspektoru Vlastnosti (Okna > Vlastnosti) vyberte volbu, která určuje, kdy chcete, aby ověření proběhlo. Můžete vybrat všechny volby, nebo pouze volbu Odeslání.
Rozostření
Ověření proběhne pokaždé, když uživatel klepne mimo textové pole.
Změna
Ověření proběhne, jakmile uživatel změní text v textovém poli.
Odeslání
Ověření v okamžiku, kdy se uživatel pokusí odeslat formulář. Volba Odeslání je vybrána ve výchozím nastavení a její výběr nelze zrušit.
Stanovení minimálního a maximálního počtu znaků
Tato volba je dostupná pouze pro typy ověření žádné, celé číslo, e-mailová adresa a adresa URL.
-
V okně dokumentu vyberte widget Ověření textového pole.
-
V inspektoru Vlastnosti (Okna > Vlastnosti) zadejte číslo do pole Min. počet znaků nebo Max. počet znaků. Pokud například zadáte do pole Min. počet znaků číslo 3, widget pouze ověří, zda uživatele zadává tři nebo více znaků.
Stanovení minimálních a maximálních hodnot
Tato volba je dostupná pouze pro typy ověření celé číslo, čas, měna a reálné číslo/matematický zápis.
-
V okně dokumentu vyberte widget Ověření textového pole.
-
V inspektoru Vlastnosti (Okna > Vlastnosti) zadejte číslo do pole Minimální hodnota nebo Maximální hodnota. Pokud například zadáte do pole Minimální hodnota číslo 3, widget pouze ověří, zda uživatel zadává do textového pole číslo 3 nebo vyšší hodnotu (4, 5, 6 atd.).
Zobrazení stavů widgetu v zobrazení Návrh
-
V okně dokumentu vyberte widget Ověření textového pole.
-
V inspektoru Vlastnosti (Okna > Vlastnosti) vyberte stav, který chcete vidět v rozbalovací nabídce Náhled stavů. Pokud například chcete vidět widget v jeho platném stavu, vyberte volbu Platný.
Změna vyžadovaného stavu textového pole
Všechny widgety Ověření textového pole, které vkládáte pomocí aplikace Dreamweaver, při publikaci na webové stránce standardně vyžadují zadání od uživatele. Vyplnění textových polí ale můžete volitelně ponechat na uživateli.
-
V okně dokumentu vyberte widget Ověření textového pole.
-
V inspektoru Vlastnosti (Okno > Vlastnosti) podle požadavků vyberte volbu Vyžadované nebo její výběr zrušte.
Vytvoření rady pro textové pole
Existuje mnoho různých druhů formátů textových polí a proto bude vhodné, abyste uživatelům poskytli radu, jaký formát mají zadat. Například textové pole s typem ověření Telefonní číslo bude akceptovat pouze čísla ve formátu (000) 000-0000. Tato ukázková čísla můžete zadat jako radu, takže textové pole zobrazí v okamžiku, kdy uživatel načte stránku do prohlížeče, správný formát.
-
V okně dokumentu vyberte widget Ověření textového pole.
-
V inspektoru Vlastnosti (Okna > Vlastnosti) zadejte nápovědu do textového pole Rada.
Blokování neplatných znaků
Ve widgetu Ověření textového pole můžete uživatelům zabránit ve vkládání neplatných znaků. Pokud tuto volbu vyberete například pro widget s typem ověření celé číslo, a uživatel se pokusí zapsat písmeno, v textovém poli se nic neobjeví.
-
V okně dokumentu vyberte widget Ověření textového pole.
-
V inspektoru Vlastnosti (Okna > Vlastnosti) vyberte volbu Vynutit vzorek.
Přizpůsobení widgetu Ověření textového pole
I když inspektor Vlastnosti dovoluje jednoduché úpravy widgetu Ověření textového pole, nepodporuje úlohy přizpůsobení stylu. Pro widget Ověření textového pole můžete upravit CSS a vytvořit tak widget, který je stylově upraven podle vašich potřeb. Seznam pokročilejších úloh přizpůsobení stylu naleznete na adrese www.adobe.com/go/learn_dw_sprytextfield_custom_cz.
Všechna pravidla CSS v níže uvedených tématech se vztahují ke standardním pravidlům umístěným v souboru SpryValidationTextField.css. Aplikace Dreamweaver uloží soubor SpryValidationTextField.css do složky zdrojů Spry webového místa při každém vytvoření widgetu Ověření textového pole Spry. Přečtení tohoto souboru je užitečné, protože soubor obsahuje vysvětlující informace o nejrůznějších stylech, které se k widgetu vztahují.
Poznámka:
I když můžete pravidla pro widget Ověření textového pole snadno upravit přímo v přiloženém souboru CSS, k úpravě CSS widgetu můžete použít také panel Styly CSS. Panel Styly CSS je užitečný k vyhledání tříd CSS přiřazených k různým částem widgetu, zejména pokud používáte režim panelu Současný.
Nastavení stylu textu chybových zpráv widgetu Ověření textového pole
Standardně se chybové zprávy pro widget Ověření textového pole zobrazují v červené barvě s okrajem o šířce 1 obrazový bod okolo textu.
-
Chcete-li změnit styl textu chybových zpráv widgetu Ověření textového pole, použijte k vyhledání příslušného pravidla CSS následující tabulku a pak změňte výchozí vlastnosti nebo přidejte svoje vlastnosti a hodnoty stylu textu:
Text, který chcete změnit
Příslušné pravidlo CSS
Příslušné vlastnosti, které se mají změnit
Text chybové zprávy
.textfieldRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState .textfieldInvalidFormatMsg, .textfieldMinValueState .textfieldMinValueMsg, .textfieldMaxValueState .textfieldMaxValueMsg, .textfieldMinCharsState .textfieldMinCharsMsg, .textfieldMaxCharsState .textfieldMaxCharsMsg color: #CC3333; border: 1px solid #CC3333;
Změna barev pozadí widgetu Ověření textového pole
-
Chcete-li změnit barvy pozadí widgetu Ověření textového pole v různých stavech, použijte k vyhledání příslušného pravidla CSS následující tabulku a pak změňte standardní hodnoty barvy pozadí:
Barva, kterou chcete změnit
Příslušné pravidlo CSS
Příslušná vlastnost, kterou chcete změnit
Barva pozadí widgetu v platném stavu
.textfieldValidState input, input.textfieldValidState background-color: #B8F5B1;
Barva pozadí widgetu v neplatném stavu
input.textfieldRequiredState, .textfieldRequiredState input, input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, input.textfieldMinValueState, .textfieldMinValueState input, input.textfieldMaxValueState, .textfieldMaxValueState input, input.textfieldMinCharsState, .textfieldMinCharsState input, input.textfieldMaxCharsState, .textfieldMaxCharsState input background-color: #FF9F9F;
Barva pozadí widgetu při aktivaci
.textfieldFocusState input, input.textfieldFocusState background-color: #FFFFCC;
Další podobné nápovědy
Adobe MAX
Konference věnovaná tvořivosti
14.–16. října Miami Beach a online
Adobe MAX
Konference věnovaná tvořivosti
14.–16. října Miami Beach a online