Různá rozvržení políček s telefonním číslem

Obsah

Formulář pro validaci celého tel. čísla

  • Uživatel musí zadat celé telefonní číslo i s předvolbou.

 

Zdrojový kód – JavaScript:

<script type="text/javascript" src="https://client.smartform.cz/v2/smartform.js" async></script>
<script type="text/javascript">
    var smartform = smartform || {};

    smartform.beforeInit = function () {
        smartform.setClientId('smartform');
    }

    /* Nastaví validační callback pro formulář. */
    smartform.afterInit = function() {
         smartform.afterInit = function() {
            smartform.getInstance("smartform-instance-1").phoneControl.addValidationCallback(function (result) {
                phoneValidationCallback(result, "1");
            });
    }

    /* Validační callback. */
    function phoneValidationCallback(response,divId) {
        console.log(response);
        var result = document.getElementById('result'+divId)

        if (response) {
             result.html("Výsledek validace: "+response.result.resultType)
        }
    }

</script>

Zdrojový kód – HTML pro formulář s celým telefonním číslem:

<form>
   <input class="smartform-instance-1 smartform-phone-number" id="phone" placeholder="Zadejte celé telefonní číslo" required="" type="text" />
</form>

Formulář pro validaci tel. čísla s nastavenou výchozí zemí

  • Předvolba je defaultně nastavena na česká telefonní čísla metodou setDefaultPrefix( prefix ).
  • Uživatel tedy může zadat české tel. číslo bez předvolby nebo jakékoliv jiné číslo, pokud uvede i předvolbu.

 

Zdrojový kód – JavaScript

<script type="text/javascript" src="https://client.smartform.cz/v2/smartform.js" async></script>
<script type="text/javascript">
    var smartform = smartform || {};

    smartform.beforeInit = function () {
        smartform.setClientId('smartform');
    }

    /* Nastaví validační callback pro formulář. */
    smartform.afterInit = function() {
         smartform.afterInit = function() {
            smartform.getInstance("smartform-instance-2").phoneControl.setDefaultPrefix("CZ");
            smartform.getInstance("smartform-instance-2").phoneControl.addValidationCallback(function (result) {
                phoneValidationCallback(result, "2");
            });
    }

    /* Validační callback. */
    function phoneValidationCallback(response,divId) {
        console.log(response);
        var result = document.getElementById('result'+divId)

        if (response) {
             result.html("Výsledek validace: "+response.result.resultType)
        }
    }

</script>

Zdrojový kód – HTML pro formulář s telefonním číslem

<form>
   <input class="smartform-instance-2 smartform-phone-number" placeholder="Zadejte telefonní číslo" tabindex="0" type="text"/>
</form>

Formulář pro validaci tel. čísla s předvolbou v selectu

  • Předpřipravené předvolby jsou vyjmenovány v HTML prvku <select>.
  • Smartform automaticky porozumí vybrané předvolbě.

 

Zdrojový kód – JavaScript

<script type="text/javascript" src="https://client.smartform.cz/v2/smartform.js" async></script>
<script type="text/javascript">
    var smartform = smartform || {};

    smartform.beforeInit = function () {
        smartform.setClientId('smartform');
    }

    /* Nastaví validační callback pro formulář. */
    smartform.afterInit = function() {
         smartform.afterInit = function() {
            smartform.getInstance("smartform-instance-3").phoneControl.addValidationCallback(function (result) {
                phoneValidationCallback(result, "3");
            });
    }

    /* Validační callback. */
    function phoneValidationCallback(response,divId) {
        console.log(response);
        var result = document.getElementById('result'+divId)

        if (response) {
             result.html("Výsledek validace: "+response.result.resultType)
        }
    }

</script>

Zdrojový kód – HTML pro formulář s předvolbou v selectu

<form>
 <select class="smartform-instance-3 smartform-phone-prefix">
     <option selected="selected" value="420">420</option>
     <option value="421">421</option>
     <option>49</option>
     <option>36</option>
     <option>43</option>
    <option></option>
  </select>

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

Formulář pro validaci tel. čísla s vlastním HTML prvkem

  • Smartform umožňuje použít pro nastavení předvolby libovolný HTML prvek.
  • Poté, co uživatel předvolbu vybere, se předvolba nastaví zavoláním metody setDefaultPrefix( prefix ).

Česko
  • Česko
  • Slovensko
  • Německo

 

Zdrojový kód – JavaScript

<script type="text/javascript" src="https://client.smartform.cz/v2/smartform.js" async></script>
<script type="text/javascript">
    var smartform = smartform || {};

    smartform.beforeInit = function () {
        smartform.setClientId('smartform');
    }

    /* Nastaví validační callback pro formulář. */
    smartform.afterInit = function() {
         smartform.afterInit = function() {
            smartform.getInstance("smartform-instance-4").phoneControl.setDefaultPrefix("CZ");
            smartform.getInstance("smartform-instance-4").phoneControl.setAutomaticFormattingFormat("INTERNATIONAL_WITHOUT_PREFIX");
            smartform.getInstance("smartform-instance-4").phoneControl.addValidationCallback(function (result) {
                phoneValidationCallback(result, "4");
            });

            /* Při změně země ve formuláři s vlastním selectem nastaví výchozí země. */
            $('#countryInput').on('change', function() {
                smartform.getInstance("smartform-instance-4").phoneControl.setDefaultPrefix(this.value);
            });
    }

    /* Validační callback. */
    function phoneValidationCallback(response,divId) {
        console.log(response);
        var result = document.getElementById('result'+divId)

        if (response) {
             result.html("Výsledek validace: "+response.result.resultType)
        }
    }

</script>

Zdrojový kód – HTML pro formulář pro s vlastním HTML prvkem pro předvolbu

<form>
 <div class="country-dropdown">
   <div class="country">
      <div class="flex-container"><img alt="" height="20" src="https://upload.wikimedia.org/wikipedia/commons/c/cb/Flag_of_the_Czech_Republic.svg" width="20" /> Česko</div>
   </div>
   <ul>
      <li class="country-option" data-value="SK">
         <div class="flex-container"><img alt="" height="20" src="https://upload.wikimedia.org/wikipedia/commons/e/e6/Flag_of_Slovakia.svg" width="20" /> Slovensko</div>
      </li>
      <li class="country-option" data-value="CZ">
         <div class="flex-container"><img alt="" height="20" src="https://upload.wikimedia.org/wikipedia/commons/c/cb/Flag_of_the_Czech_Republic.svg" width="20" /> Česko</div>
      </li>
      <li class="country-option" data-value="DE">
         <div class="flex-container"><img alt="" height="20" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Flag_of_Germany.svg" width="20" /> Německo</div>
      </li>
   </ul>
   <input class="option" id="countryInput" type="hidden" value="" />
</div>
 <input class="smartform-instance-4 smartform-phone-number" type="text" />
</form>