Jak zvýraznit chyby u polí namísto notifikací na přihlašovací stránce?

Ahoj, chtěli bychom trochu přepracovat přihlašovací obrazovku a rádi bychom zvýrazňovali chybně vyplněná pole namísto chybové zprávy. Máte na to nějaký fígl?

Možností je určitě hned několik, každý si musí najít to, co právě jeho řešení vyžaduje. Jednou z nich (a možná právě tou nejlepší) se jeví kompletní custom autentifikace.

A) Custom autentifikace

Nativní APEX autentifikace totiž pracuje přes submit, kde jsou v PL/SQL blocích vykonávány jednotlivé autentifikační procesy. Teprve na konci všech procesů přichází přesměrování, které uživatele odkáže buď na definovanou homepage anebo v případě chyby zpět na přohlašovací stránku s definicí chyby v URL (server-side message). Právě díky řešení custom authentification si můžete chyby ošetřit vlastním způsobem a třeba i využít APEX validace na jednotlivé prvky.

B) Upravení pozice upozornění přemístěním prvku v template obrazovky

Chybu lze přesunout pomocí úpravy v template. Pro její přesun stačí vyjmout #NOTIFICATION_MESSAGE# z aktuální pozice a umístit ji na požadované místo v HTML. Vyřešíte tím však pouze snadné umístění zprávy do jiného regionu a o zbytek se musíte postarat modifikací templaty samotné message anebo pomocí CSS. Neřeší vazbu k itemům samotným.

C) Využití nativní APEX utility a přesunout zprávu na frontendu pomocí JS a CSS

Tato úprava nevyžaduje úpravu template stránky a ani nutně nevyžaduje vlastní custom autentikaci. V prvním kroku pomocí CSS skryjeme region. CSS je v tomto kroku mnohem lepší než jQuery hide() kvůli statickému nastavení – samotná funkce je pomalá a může docházet k nehezkému problikávání zprávy na jejím místě v HTML. Zprávu skryje celou se všemi jejími prvky:

1
#APEX_ERROR_MESSAGE { display: none; }

Následně sebereme pomocí javascriptu (detach() kvůli zachování např odpočtu pro opětovný login) jeho content a umístíme jej pomocí appendTo() v dynamické akci. Dynamickou akci vytvoříme na page load event, použijeme pro ni client-side condition $('.t-Body-alert').length != 0 (docílíme tak toho, že se nespustí při prvním spuštění, kdy chyba ještě neexistuje) a true action zvolíme „Execute Javascript Code“, kde využijeme i APEX JS namespace – konkrétně apex.message.showErrors:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
apex.message.showErrors([
    {
        type:       "error",
        location:   "inline",
        pageItem:   "P9999_USERNAME",
        message:    "",
        unsafe:     false
    },
    {
        type:       "error",
        location:   "inline",
        pageItem:   "P9999_PASSWORD",
        message:    "",
        unsafe:     false
    }
]);

$('.t-Body-alert .t-Alert-body').detach().appendTo('#P9999_PASSWORD_error');

Pomocí tohoto jednoduchého scriptu přesuneme chybu k heslu, ale nelze ji umístit k více elementům. To by bylo možné uložením obsahu $('.t-Body-alert .t-Alert-body').detach() do JS variable, která by se pak dala duplikovat.

A výsledkem tedy je?

Jak je vidět, tak i poslední client-side řešení je strohé, hrubé a umožňuje spoustu jiných možností. Tím chci říct, že například právě tuto jednu akci lze rozdělit na 3 různé – jedna může kontrolovat a házet chybu jen k username, druhá jen k password a třetí pak například ovlivňovat oba elementy, ale je třeba zjišťovat podmínku toho, kdy co požadujete spustit. Takže jsme vlastně zpět na úvodu o custom autentifikaci nebo u zrodu masivního monstra… Rozhodnutí je už na vás…

Vladimír Opolský

Oracle APEX developer, HTML, CSS, JavaScript, jQuery, PL/SQL...

Komentáře

avatar
  Odběr  
Upozornit na

Můžeme Vám s něčím poradit?

S vývojem aplikací v APEXu, Javascriptem, ...

Váš dotaz bude zveřejněn, jakmile na něj jeden z našich expertů odpoví. Vaši e-mailovou adresu nikde uvádět nebudeme.

Vyplňte prosím požadovaná pole.