'Flag appending on input tel js so validation not working properly

In this code i want to try make validation phone number field. I am using Tel-Input-Js. if i am using

initialCountry: "AE",

for showing default selection country. but it's not working properly as you can see in image AE country flag is just append on US flag so volition not working properly.

Here my HTML code:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <title>International telephone input</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <!-- <link rel="stylesheet" href="style.css" /> -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
    </head>
    <style>
      
    
        .container {
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            padding: 10px;
        }
    
        #phone,
        .btn {
            padding-top: 6px;
            padding-bottom: 6px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
    
        .btn {
            color: #ffffff;
            background-color: #428BCA;
            border-color: #357EBD;
            font-size: 14px;
            outline: none;
            cursor: pointer;
            padding-left: 12px;
            padding-right: 12px;
        }
    
        .btn:focus,
        .btn:hover {
            background-color: #3276B1;
            border-color: #285E8E;
        }
    
        .btn:active {
            box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
        }
    
        .alert {
            padding: 15px;
            margin-top: 10px;
            border: 1px solid transparent;
            border-radius: 4px;
        }
    
        .alert-info {
            border-color: #bce8f1;
            color: #31708f;
            background-color: #d9edf7;
        }
    
        .alert-error {
            color: #a94442;
            background-color: #f2dede;
            border-color: #ebccd1;
        }
    
        © 2022 GitHub,
        Inc. Terms Privacy Security Status Docs Contact GitHub Pricing API Training Blog About
    </style>
    
    <body>
        <div class="container">
            <form id="login" onsubmit="process(event)">
                <p>Enter your phone number:</p>
                <input id="phone" type="tel" name="phone" />
                <input type="submit" class="btn" value="Verify" />
            </form>
            <div class="alert alert-info" style="display: none"></div>
            <div class="alert alert-error" style="display: none"></div>
        </div>
    </body>
    <script>
        const phoneInputField = document.querySelector("#phone");
        const phoneInput = window.intlTelInput(phoneInputField, {
            utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
        });
    
        const info = document.querySelector(".alert-info");
        const error = document.querySelector(".alert-error");
    
        function process(event) {
            event.preventDefault();
    
            const phoneNumber = phoneInput.getNumber();
    
            info.style.display = "none";
            error.style.display = "none";
    
            if (phoneInput.isValidNumber()) {
                info.style.display = "";
                //    info.innerHTML = `Phone number in E.164 format: <strong>${phoneNumber}</strong>`;
                info.innerHTML = `Phone number in Valid`;
    
            } else {
                error.style.display = "";
                error.innerHTML = `Invalid phone number.`;
            }
        }
        var input = document.querySelector("#phone");
        window.intlTelInput(input, {
            excludeCountries: ["US","IN"],
            preferredCountries: [ "AE" ],
            initialCountry: "AE", //change according to your own country.      
            utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
        });
    </script>
    
    </html>

Output Image

I am using

excludeCountries: ["US","IN"],

for removing us country but also it's appending on us flag.

i want to show default country as a AE and without country change "00971551234567" this number should be need to validate.

and i also need custom placeholder for the AE country how can i do it.?

help me to solve out this problem. advance thanks for who's help me to solve out this problem.

javascripthtmljqueryjquery-pluginsintl-tel-input


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions