Označení povinných položek

Od Internet Exploreru 10 je pro položky, které se musí vyplnit, funkční HTML atribut required pro formulářová pole.

<input name="jmeno" required>

Takové políčko je potom nutné (v podporovaných prohlížečích) vyplnit, jinak se odeslání formuláře nezdaří.

Vypadat by hláška upozorňující na nutnost vyplnění měla vypadat zhruba následovně (ukázka z Firefoxu).

Hlášky vyžadující vyplnění políčka

Validace pole

Odlišit vyplněné povinné pole od nevyplněného jde selektory :valid a :invalid.

Označení

Zaměřit povinné pole je možné speciálním selektorem :required (IE 10+) nebo obecným atributovým input[required] (IE 7+).

Bývá zvykem povinná pole označovat hvězdičkou, tučným nebo barevně odlišeným popiskem či prostým textem „povinné“.

Tomuhle repertoár CSS selektorů příliš nenahrává, protože není možné zaměřit předcházející element. Kromě toho u <input>u není možné použít obsah vložený přes content do pseudoelementů :before/:after.

Následující kód tedy nic neudělá:

input[required]:after {
  content: "*";
}

Existují následující řešení:

  1. Pomocí posicování nebo obtékání dosáhnout HTML kódu typu:

    <input id="pole"><label for="pole">

    Tento kód půjde v CSS pohodlně zaměřit:

    input[required] + label:after {
      content: " povinné";
    }
  2. Za <input> přidat prázdný element (například <span>). Který bude možné zaměřit.

    input[required] + span:after {
      content: " (povinné)";
    }

    Živá ukázka

  3. Použít JavaScript, který projde všechna pole a prázdný element tam přidá. Zbývající postup je stejný.

    Živá ukázka (využívá querySelectorAll)

Ošetření na straně serveru

Ošetřit přijatá data na serveru je bezpodmínečně nutné i při používání všelijakých pravidel na straně klienta (HTML/JavaScript).

Znalejší návštěvník nebude mít problém pomocí vývojářských nástrojů atribut required (nebo kterýkoliv jiný) vyřadit.

Odstranění atributu ve vývojářských nástrojích

Zpětná kompatibilita

Jednotlivé části řešení mají odlišnou podporu v Internet Explorerech

  • Zobrazování obsahu pomocí content funguje až v IE 8.

  • Validace (povinnost vyplnit položku označenou required) na straně klienta funguje až v IE 10.

Prohlížeče IE 9 a starší tedy nechají formulář odeslat i bez vyplnění povinných položek.

Je k úvaze, jak to při důsledné validaci na serveru bude vadit. Stejně tak případné nezobrazení obsahu z vlastnosti content v IE 7.

Chamurappi správně podotýká, že v případě důsledné (funkční napříč všemi prohlížeči) validaci na straně klienta může být naopak validace na serveru lehce ošizená, protože se k ní drtivá většina návštěvníků se zapnutým JavaScriptem vůbec nedostane (v extrémním případě stačí zajistit, aby data nenarušila aplikaci).

Pouze validace na serveru, která by v IE 9 a starších v případě užití required nastala, může ale značně znepříjemnit zážitek u formulářů obsahující:

V případě, že po odeslání formuláře na server a vrácení chybové hlášky tato pole nepřežijí, zažije návštěvník značný diskomfort, protože je bude muset vyplňovat znovu.

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Atribut pattern pro formuláře

Atribut pattern pro formulářové prvky

Validace formulářů regulárními výrazy na straně klienta bez JavaScriptu.

Autocomplete

Automatické vyplňování formulářů

Pomocí atributu autocomplete jde usnadnit a zrychlit vyplňování formulářů.

Tabindex

Tabindex

Atribut tabindex slouží k uspořádání položek pro procházení klávesnicí.

Maximální délka pole

Maximální počet znaků

HTML atribut maxlength omezuje počet znaků ve formulářovém poli.

Minlength

Atribut minlength

HTML atribut minlength stanovuje minimální počet znaků, který musí být v políčku.

Komentáře