Webové formuláře 2009 - co od nich vyžadovat? Ošetření chyb.
12. 08. 2009 | Pavel Růžička | Ostatní | Komentáře: 4
Jakkoli nám dnes do webových aplikací pronikají různé AJAXy, jQuery a SilverLighty - poctivým základem aplikace je ještě stále formulář. V pokračování předchozího článku se zaměříme na formuláře spolehlivé, formuláře, které předcházejí chybám a umožňují uživateli chybu snadno napravit.
Prevence chyb
Pro aplikace, z nichž vyplývají právní důsledky, stránky, umožňující provádět finanční transakce, stránky umožňující modifikaci nebo mazání uživatelských dat uložených v systémech pro uchovávání dat nebo pro stránky, pomocí nichž se odesílají odpovědi na testové otázky, platí alespoň jeden z následujících bodů:
Zrušitelnost
Akce uživatele lze vrátit zpět.
Kontrola dat
Data zadaná uživatelem jsou zkontrolována na chyby a uživatel má možnost chyby opravit.
Potvrzení
Je dostupný mechanismus umožňující zkontrolování, potvrzení a opravení informací před dokončením zadávání.
Povinné položky, položky vyžadující speciální formát
Povinná položka formuláře musí být označena symbolem *, vyznačeným jako superscript s atributem title, který bude zároveň obsahovat textovou informaci o tom, že se jedná o povinnou položku (<sup title=”povinná položka“>*</sup>). Na začátku formuláře pak musí být informace o tom, že položky označené symbolem * jsou povinné.
Upozornění na vyžadovaný formát položky musí být v textové podobě, ideálně umístěné před prvkem a jako součást jeho popisku (<label >).
Formulář drží svůj obsah
Formulář, který není při odeslání zpracován, musí podržet svůj obsah – nikdy nesmí dojít k vyprázdnění toho, co uživatel vyplnil
Tlačítko Reset
vynechejte tlačítko Reset (Vymazat), nemá žádné opodstatnění , maximálně zmate uživatele, protože netuší, co všechno se mu může vymazat.
Validace, Identifikace chyby
Je-li zjištěna při validaci vstupu chyba (na klientské a/nebo serverové straně) je potřeba toto uživateli sdělit intuitivní, efektivní a použitelnou cestou.
Chyba musí být jasně identifikovatelná, měl by být zajištěn snadný přístup k chybnému prvku, prvku může být nastaven focus.
Uživatel musí mít možnost chybu snadno opravit a odeslat formulář znovu
Chyby vztahující se k celému formuláři musí být umístěny nad formulářem.
Chyby vztahující se k jednotlivým prvkům formuláře musí být umístěny hned vedle prvku, nejlépe napravo od něj, nebo nad ním.
Specifické validátory
Zde jsou některé často používané validace ve formě regulárních výrazů.
E-mail:
^[\w-\.]+@\w+([-.]\w+)*\.\w+([-.]\w+)*$
URL:
^(http|https|mailto|callto|ftp):\/\/[a-zA-Z0-9\.\-]+\.[a-zA-Z0-9]{2,4}(:\d{1,6})?\/{1}[-_:~&=#\?\.a-zA-Z0-9\/]*$
MSISDN v národním tvaru:
^[67]\d{8}$
Telefonní číslo zadávané písmeny:
^[+0-9 A-Z]{6,16}$
PSČ (zip code):
^[- 0-9]{5,10}$
Uživatel v doméně Active Directory:
^[a-zA-Z0-9_\-]{3,128}\\{1}[a-zA-Z0-9_\-]{3,128}$
IČ, rodné číslo: Toto je také hodnota, kterou je potřeba často validovat - jednoduchý regulární výraz kvůli neexistuje, algoritmus je komplikovanější, dovolím si zde proto odkázat na článek Jak ověřit platné IČ a rodné číslo.
Doporučení nápravy chyby
Je-li zjištěna chyba (na klientské či serverové straně), zajistěte doporučení, jak chybu napravit. Výjimku tvoří případ, kdy je takový postup v rozporu s bezpečností nebo účelem obsahu.
Závěr článku
Máte nějaké své osvědčené validátory nebo další postupy jak předcházet chybám ve formulářích? Napište je prosím do komentářů :)
Další aktuální články na interval.cz
- Malware: android pod palbou, mobily v ohrožení?
- Pozvánka na Microsoft TechDays 2012
- Reklamní slepota: co to je a jak s ní bojovat?
- Pět důvodů, proč vybrat redakční systém Drupal
- Čeština pro WordPress 3.3.1 k dispozici
Tematicky související články
- Webové formuláře 2009 - co vyžadují? Použitelnost a přístupnost.
- Webové formuláře 2009 - co vyžadují? Bezpečnost.
- Pohled na webové formuláře druhé generace
- Jakým způsobem zrychlit webové aplikace?
- WebML - kompozice webové aplikace
Dejte vědět i ostatním o článku
Komentáře ke článku
Datum vložení: 17. Srpen 2009, 15:27:51
Regulární výrazy pro kontrolu e-mailové a URL adresy jsou špatně. Jednak jsou příliš přísné (e-mailová adresa např. nedovoluje poměrně běžné podtržítko, URL zase zakazuje doménu .museum a vyžaduje koncové lomítko za samotnou doménou) a jednak příliš tolerantní (např. dovolují dvě tečky za sebou nebo šesticiferný port). Regulární výraz pro kontrolu e-mailu je k dispozici na http://php.vrana.cz/kontrola-e-mailove-adresy.php
Datum vložení: 21. Srpen 2009, 21:03:22
Souhlasím s tím, co psal Jakub Vrána. Zajímavou možností je dále doplnění nápovědy po vyplnění políčka, jako to dělá třeba twitter při registraci.
Datum vložení: 05. Září 2009, 00:39:08
Na kontrolu psč (zip) používám funkci:
function check_zipcode( $zip_string, $length = 5 ) {
global $chyba;
if( $zip_string == NULL || !is_int( $length ) ) {
$chyba .= "Musíte zadat PSČ.\n";
return $chyba;
}
if (!is_numeric($zip_string)) {
$chyba .= "PSČ má pouze číslenou hodnotu!\n";
return $chyba;
}
$chars = array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9');
$zip_string = trim( $zip_string );
for( $i = 0; $i < strlen( $zip_string ); $i++ ) {
if( !in_array( $zip_string[ $i ], $chars ) && ord(" ") != ord( $zip_string[ $i ] ) )
return ;
}
if( $length == 0 )
return 1;
$zip_string = str_replace(' ', '', $zip_string );
$chyba = "PSČ má 5 čísel\n";
return ( strlen( $zip_string ) != $length ? $chyba : $zip_string );
}
Datum vložení: 05. Září 2009, 00:39:49
function check_zipcode( $zip_string, $length = 5 ) {
global $chyba;
if( $zip_string == NULL || !is_int( $length ) ) {
$chyba .= "Musíte zadat PSČ.\n";
return $chyba;
}
if (!is_numeric($zip_string)) {
$chyba .= "PSČ má pouze číslenou hodnotu!\n";
return $chyba;
}
$chars = array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9');
$zip_string = trim( $zip_string );
for( $i = 0; $i < strlen( $zip_string ); $i++ ) {
if( !in_array( $zip_string[ $i ], $chars ) && ord(" ") != ord( $zip_string[ $i ] ) )
return ;
}
if( $length == 0 )
return 1;
$zip_string = str_replace(' ', '', $zip_string );
$chyba = "PSČ má 5 čísel\n";
return ( strlen( $zip_string ) != $length ? $chyba : $zip_string );
}
