it-swarm-eu.dev

Obecná validace formulářů na straně klienta

Jsem autorem jQuery Form Validation plugin , který jsem začal psát v roce 2006. Od té doby jsem vynaložil značné úsilí na zlepšení výchozí interakce, aniž by vývojář pomocí pluginu musel přizpůsobit cokoliv. Úsilí je dobře vynaloženo, protože vývojářům bez jakéhokoli vzdělání v designu interakcí umožnilo získat solidní vylepšení svých forem.

Doufám, že zde shromáždím několik návrhů pro další vylepšení. Pokud jste v tom, začněte tím, že si trochu zahrajete s výchozí ukázky .

Chování, které zde uvidíte, je popsáno zde , citovat: Ve výchozím nastavení jsou formuláře ověřovány při odeslání, spouštěné uživatelem kliknutím na tlačítko Odeslat nebo stisknutím klávesy Enter, když je zadávání formuláře zaostřeno (volba onsubmit). Kromě toho, jakmile bylo pole označeno jako neplatné, je validováno pokaždé, když uživatel něco do pole zadá (volba onkeyup). Když uživatel zadá něco neplatného do platného pole, bude také ověřeno, když pole ztratí fokus (volba onblur).

Cílem těchto interakcí je poskytnout zpětnou vazbu co nejdříve, aniž by to obtěžovalo uživatele. Zobrazování chybových zpráv dříve, než měl uživatel šanci něco napsat, není užitečné.

Jedním z problémů, které někdo nedávno poznamenal, je toto: (Začněte od nuly, poté zaměřte pole, napište do něj něco, odstraňte jej, kartu mimo pole. V takovém případě, i když je pole povinné, plugin to neřekne. To někdo navrhl změnit a aktivovat "agresivnější" validaci, jakmile někdo začal psát do pole. Nejsem si tím jistý.

Složitějším problémem je zobrazování chybových zpráv. Plugin lze přizpůsobit poměrně silně, jak je vidět v tomto Marketo demo . Zde se inline zprávy zobrazují pouze pro jiná pravidla než požadovaná, např. zadáním „foobar“, jak by se v e-mailové adrese zobrazovalo „Zadejte prosím platnou e-mailovou adresu, například: [email protected]“ vedle tohoto pole, jinak jen „Zmeškali jste 12 polí. Byly zvýrazněny níže.“ V horní části jsou zobrazena políčka, zatímco pole jsou zvýrazněna červeným rámečkem. I když to funguje dobře v tomto konkrétním designu, pochybuji, že je možné učinit tento standard pro generické ověřování formulářů, který funguje všude.

Dobré výchozí nastavení je rozhodně důležité, protože i spíše populární weby mají tendenci pouze kopírovat demo kód a používat jej tak, jak jsou.

Těšíme se na vaše návrhy a dobrou diskusi! Dejte mi vědět, jestli bych měl dát konkrétní otázky do samostatných otázek.

10
Jörn Zaefferer
  • Poskytněte uživateli nějaký druh potvrzení, že jeho vstup byl správně přijat a ověřen. Mnoho uživatelských rozhraní používá k zobrazení tohoto zobrazení jednoduché zaškrtnutí připojené za vstupní pole

  • Umožněte uživatelům, aby věděli, co od nich vstupní pole vyžaduje, prostřednictvím jakéhokoli návrhu na základě návrhu (např. Výchozí hodnota, která se vymaže)

Pokud jsem uživatel, který ví, co se ode mě vyžaduje (např. Uživatelské jméno delší než 2 znaky), je méně pravděpodobné, že se pokusím nejprve zadat neplatný vstup. Mohlo by to být ve formě výchozí hodnoty pro pole, které se na vstupu automaticky vymaže.

Zadejte svou e-mailovou adresu: [Příklad: [email protected]] (Vymazání zaostřeno)

Tato výchozí hodnota může být buď stažena z pole „hodnota“ pole nebo vygenerována na straně klienta na základě požadovaných pravidel. Záleží na tom, kolik práce byste do něj měli chtít.

  • Některá uživatelská rozhraní nyní zavádějí grafiku, která se objevuje v horním rohu vstupního pole, která je ověřována, aby ukázala uživatelům, že je to požadováno (liší se od tradičního * značkovače), ale je stejně účinné.

Doufám, že tyto pomoci,

Addy

AddyOsmani.com

3
Addy Osmani

Je zde velmi dobrý článek od Luka Wroblewského o seznamu kromě: Inline Validation in Web Forms . Říká se, že použití ověřování při psaní vede k delším časům vyplňování formulářů a frustrací.

Navrhl bych návrh webových formulářů knihy od Luka Wroblewského ( Amazon , Knihy Google ). Podrobně popisuje chybové zprávy, ověření, nápovědu a všechna témata týkající se webových formulářů.

1
Zoltán Gócza