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ářů :)

4 Příspěvků v diskuzi

  1. 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

  2. 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.

  3. 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 );
    }

  4. 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 );
    }

Odpovědět