Základní postupy

Obsah

Začínáme se Smartformem

  1. Nejprve se zaregistrujte v administrační aplikaci, tím získáte své clientId, které později vložíte do zdrojového kódu pro přihlášení k Smartformu.
  2. Přidejte všechny domény, na kterých chcete Smartform provozovat. Zaregistruje si i domény, na kterých budete Smartform testovat.
  3. Poté si v administrační aplikaci pro jednotlivé domény aktivujte službu „Telefonní čísla“ a podle pokynů proveďte platbu. 
  4. A teď už se vrhneme na úpravu HTML stránky s formulářem. Do hlavičky (head) je potřeba přidat pár řádků s Javascriptem
    • odkaz na Javascript kód Smartformu 
       <script type="text/javascript" src="https://client.smartform.cz/v2/smartform.js" async>
 </script>
    • a inicializační skript – zde jako parametr funkce smartform.setClientId doplňte clientId, které máte přiděleno v administrační aplikaci 
        <script type="text/javascript">
  var smartform = smartform || {};
  
  smartform.beforeInit = function () {
        smartform.setClientId('[zde doplňte klientské ID]');
  }
  </script>
  5. Potom už stačí jenom správně označit vstupní formulářové pole zadávání telefonního čísla. Vstupní <input> nebo <select> element označíte tak, že do atributu class přidáte jeden z identifikátorů:
    • smartform-phone-number (telefonní číslo - s předvolbou nebo bez)
    • smartform-phone-prefix (předvolba)

Dokumentace API

Aktuální verze API – verze 2 – obsahuje mimo jiné i funkce pro validaci telefonních čísel. Vše potřebné najdete v dokumentaci. Pro ovládání validace telefonních čísel použijte objekt SmartformInstance.phoneControl.

Různé rozložení polí pro telefonní čísla

Pro zadávání telefonního čísla existují různé kombinace:

  1. Jedno textové pole: Telefonní číslo se zadává v jednom elementu <input>. Uživatelé mají možnost vložit telefonní číslo s předvolbou nebo bez ní. Aby mohli uživatelé zadávat číslo bez předvolby, je nutné nastavit nastavit defaultní předvolbu nebo kód země metodou setDefaultPrefix. 
  2. Předvolba a telefonní číslo odděleně: Zadávání čísla pomocí oddělených polí pro předvolbu a telefonní číslo. Předvolbu lze zadávat pomocí <select> nebo <input> elementu, telefonní číslo lze zadat pomocí <input> elementu.
  3. Předvolba ve vlastním HTML prvku a telefonní číslo v <input> elementu: Pokud využíváte samostatný HTML prvek pro výběr předvolby, lze v event handleru nastavit výchozí zemi nebo předvolbu metodou setDefaultPrefix.

V praxi můžete vidět všechny tyto typy formulářů pro validaci telefonního čísla v ukázce.

Více telefonních čísel na jedné stránce

Pokud potřebujete zadat víc než jedno telefonní číslo na jedné stránce, je potřeba vstupní políčka jednotlivých telefonů odlišit. K tomu slouží další identifikátor, který se přidá do atributu class elementů <input>. Tento identifikátor musí začínat řetězcem "smartform-instance" a jeho uvedením se políčko začlení do tzv. instance Smartformu, která je z API dostupná právě přes svůj identifikátor.

Pokud je na stránce jen jeden formulář, není vůbec potřeba identifikátor zadávat. Použije se totiž implicitní identifikátor instance (což je prázdný řetězec).

Následuje příklad formuláře se dvěma telefonními čísly:

  <form>
     <input type="text" class="smartform-phone-number smartform-instance-phone-1">

     <input type="text" class="smartform-phone-number smartform-instance-phone-2">
  </form>

Formátování telefonního čísla

Formátování je ve výchozím nastavení zapnuto a spouští se po zadání platného telefonního čísla, a to až v momentě, kdy uživatel opustí pole formuláře. K dispozici jsou dva formáty: „NATIONAL“ (např. „777 777 777“) a „INTERNATIONAL“ (např. „+420 733 457 285“). Pro více informací o těchto formátech navštivte sekci o formátech.

Výběr konkrétního formátu závisí na nastavení formuláře a dodržuje tyto pravidla:

  1. Při zadávání telefonního čísla do dvou oddělených polí (předvolba a číslo) se část s číslem naformátuje ve formátu „NATIONAL“.
  2. Pokud se zadává celé číslo v jednom poli a není zvolena výchozí země, aplikuje se formát „INTERNATIONAL“. V případě, že je specifikována výchozí země, použije se formát „NATIONAL“.

Získání dalších informací o zadaném telefonním čísle

Při zadávání telefonního čísla Smartform průběžně zadaný telefon validuje (kontroluje zdali skutečně existuje). K výsledku validace je možné se dostat řešením pomocí callbacku.

smartform.afterInit = function () {
    smartform.getInstance().phoneControl.addValidationCallback( phoneValidationCallback );
}
    
function phoneValidationCallback ( validationResult ) {
    console.log( validationResult.result.resultType );
}