Tel Field

Simple input

<label for="phone">Phone</label>
<input id="phone" type="tel" data-fc-modules="tel-field">

Required input (dynamic validation)

<label for="phone-validation">Phone</label>
<input id="phone-validation" required type="tel" data-fc-modules="tel-field" data-fc-text-error="Invalid number">

Specify countries

<label for="phone-european">European Phone</label>
<input id="phone-european" type="tel" data-fc-modules="tel-field" data-fc-countries="al,ad,at,by,be,ba,bg,hr,cz,dk,ee,fo,fi,fr,de,gi,gr,va,hu,is,ie,it,lv,li,lt,lu,mk,mt,md,mc,me,nl,no,pl,pt,ro,ru,sm,rs,sk,si,es,se,ch,ua,gb">

Specify preferred countries

<label for="phone-preferred">Phone</label>
<input id="phone-preferred" type="tel" data-fc-modules="tel-field" data-fc-preferred-countries="es,pt">

Add preffix to the input value

<label for="phone-prefix">Phone</label>
<input id="phone-prefix" type="tel" required data-fc-modules="tel-field" data-fc-prefix="true">

Totally sync select fields

<ol>
  <li>
    <label>Telephone number</label>
    <input id="phone" type="tel" data-fc-modules="tel-field" data-fc-country-field="#address-country-sync" data-fc-code-field="#code-country-sync">
  </li>
  <li>
    <label>Country</label>
    <div class="select">
      <select id="address-country-sync"></select>
    </div>
  </li>
  <li>
    <label>Code</label>
    <div class="select">
      <select id="code-country-sync"></select>
    </div>
  </li>
</ol>

Totally sync input fields

<ol>
  <li>
    <label>Telephone number</label>
    <input id="phone" type="tel" data-fc-modules="tel-field" data-fc-country-field="#address-country-sync-input" data-fc-code-field="#code-country-sync-input">
  </li>
  <li>
    <label>Country</label>
    <input type="text" id="address-country-sync-input" />
  </li>
  <li>
    <label>Code</label>
    <input type="text" id="code-country-sync-input" value="229" />
  </li>
</ol>

Partial sync: Only tel field changes other fields

<ol>
  <li>
    <label>Telephone number</label>
    <input id="phone" type="tel" data-fc-modules="tel-field" data-fc-country-field="#address-country-tel" data-fc-sync-country="false" data-fc-code-field="#code-country-tel" data-fc-sync-code="false">
  </li>
  <li>
    <label>Country</label>
    <div class="select">
      <select id="address-country-tel"></select>
    </div>
  </li>
  <li>
    <label>Code</label>
      <div class="select">
        <select id="code-country-tel"></select>
      </div>
  </li>
</ol>

Partial sync: Other fields changes tel field

<ol>
  <li>
    <label>Telephone number</label>
    <input id="phone" type="tel" data-fc-modules="tel-field" data-fc-country-field="#address-country-other" data-fc-code-field="#code-country-other" data-fc-sync-tel="false">
  </li>
  <li>
    <label>Country</label>
    <div class="select">
      <select id="address-country-other"></select>
    </div>
  </li>
  <li>
    <label>Code</label>
    <div class="select">
      <select id="code-country-other"></select>
    </div>
  </li>
</ol>

Attributes

required

Makes the format validation works

DEFAULT: false

data-fc-text-error

Text to show when the format number is not valid

DEFAULT: Invalid

data-fc-prefix

Adds the prefix automatically to the field

DEFAULT: false

data-fc-countries

List separated by comma of iso code countries you want to show.

DEFAULT: null

data-fc-prefered-countries

List separated by comma of iso code countries you want add to the top of the list

DEFAULT: us,gb

data-fc-local-language

By default the input shows the name of the countries in english but if you set this to true they will be displayed with the local names.

DEFAULT: false

data-fc-country-field

target jQuery selector of one select to fill it with the list of countries and sync with the tel field

DEFAULT: null

data-fc-code-field

target jQuery selector of one select to fill it with the list of country codes and sync with the tel field

DEFAULT: null

data-fc-sync-tel

If you use the country-field or code-field option this will desactivate the sync of the fields when you change the tel field

DEFAULT: true

data-fc-sync-country

If you use the country-field option this will desactivate the sync of the fields when you change the country field

DEFAULT: true

data-fc-sync-code

If you use the code-field option this will desactivate the sync of the fields when you change the code field

DEFAULT: true