Parameters

Country:
Show Flag:
Change Flag:
Required:
Initial Value:

Telephone Input

Result

Area Code:
Phone:
Full Phone:

jsTelephoneInput 1.0.0

Vanilla JS library to validate international telephones. It uses a precompiled and express version of the google's libphonenumber called awesome-phonenumber

Download: GitHub
Demo: Standalone

Getting Started

1. Import Library

                    
    <!-- Load Library CSS -->
    <link rel="stylesheet" href="ui-dist/js-telephone-input.css" />
    <!-- Load Library JS -->
    <script src="ui-dist/js-telephone-input.js"></script>

2. HTML Markup

                    
    <div class="ui-telephone">
        <div class="ui-telephone__number">
            <input data-js="telephone" type="text" />
        </div>
        <div data-js="tel-validations" class="ui-telephone__validations"></div>
    </div>

3. Initialize Component

                    
    //Define parameters
    var parameters = {
        required: true,
        withFlag: true,
        canChangeCountry: true,
        country: 'ar'
    };

    //Initialize component
    var telephoneInput = document.querySelector('[data-js="telephone"]');
    telephoneInput = new jsTelephoneInput(telephoneInput, parameters);

    //Call method
    console.log(telephoneInput.isValid());

Parameters

Name Type Default Description
required Boolean true If the value is required
withFlag Boolean true Show the flag of the country
canChangeCountry Boolean true Let the user change the country
validations String 'telValidations' Id of the div element where the validations will be shown
areaCode String 'telAreaCode' (Optional) Id of the input where the area code value will be stored
number String 'telNumber' (Optional) Id of the input where the telephone number value will be stored
fullNumber String 'telFullNumber' (Optional) Id of the input where the full telephone value will be stored
messages Json Check JSON List of validation messages

Parameters as data attributes

All the parameters can be passed as input attributes. Just transform the parameters camelCase into dash-case and add 'data-' before.

                
    <input data-js="telephone" type="text" data-with-flag="true"
       data-can-change-country="true" data-validations="telValidations"
       data-area-code="telAreaCode" data-number="telNumber" />

Methods

Name Return Description
setInputsValue() - If the number is correct, it will set the inputs value. Inputs are defined by the parameters (fullNumber, areaCode, number)
getTelephone() Json Returns a Json with the data of the telephone. Ex: {country: 'ar', countryCode: '54', fullTelephone: 112345678, areaCode: 11, telephone:2345678}
isValid() Boolean Returns the validity of the typed phone
validate() - Will display the validations messages
getExampleNumber(countryCode) String Will return a example number