ThisIsMe ThisIsMe -4 years ago 290
HTML Question

Making intlTelInput and Jquery mask plugins to work together

I am trying to add the "mask" feature (from jquery mask plugin) to the intlTelInput plugin.
This way, the user input will be "forced" to have the number phone pattern according to the country he selected.

Here is my code for now (which you should be able to run easily as I added online ressources):

<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.14/css/intlTelInput.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.14/js/utils.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.14/js/intlTelInput.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.js"></script>

</head>


<body>

<form action="" method="POST" onsubmit="return submitForm(this);">

<input type="tel"name ="phone1" id="phone1" value="<?php echo $phone1;?>">

<input type="tel" class="hide" id="hiden">

<button type="submit">Validate</button>

</form>


</body>



<script>

/* INITIALIZE BOTH INPUTS WITH THE intlTelInput FEATURE*/

$("#phone1").intlTelInput({
initialCountry: "us",
separateDialCode: true,
preferredCountries: ["fr", "us", "gb"],
geoIpLookup: function(callback) {
$.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
var countryCode = (resp && resp.country) ? resp.country : "";
callback(countryCode);
});
},
utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.14/js/utils.js"
});


$("#hiden").intlTelInput({
initialCountry: "us",
dropdownContainer: 'body',
utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.14/js/utils.js"
});



/* ADD A MASK IN PHONE1 INPUT (when document ready and when changing flag) FOR A BETTER USER EXPERIENCE */

var mask1 = $("#phone1").attr('placeholder').replace(/[0-9]/g, 0);

$(document).ready(function(){
$('#phone1').mask(mask1)});

$("#phone1").on("countrychange", function(e, countryData) {
$("#phone1").val('');
var mask1 = $("#phone1").attr('placeholder').replace(/[0-9]/g, 0);
$('#phone1').mask(mask1);
});


/*ON SUBMIT...*/

function submitForm(oFormElement)
{


document.getElementById("hiden").value = $("#phone1").val().replace(/\s+/g, ''); // REMOVE ALL THE SPACES OF PHONE1 VALUE
// PUT THE RESULT IN HIDEN INPUT
// AND TEST THIS LATTER TO SEE IF IT FITS WITH
// the intlTelInput NUMBER FORMAT

//alert($("#hiden").val());


// AND IT WILL DISPLAY OK
if($("#hiden").intlTelInput("isValidNumber")==true){
alert("OK");
return true;
}
else{
alert("NOT OK");
return false;
}

}


</script>


The problem here, is that I can't remove the flags dropdown of the hidden field, as you can see:

enter image description here

I tried to add an option called dropdownContainer to the initialization of the hidden field. It says in the intltelinput doc that this option with the value 'body' should place the flag dropdown next to the container (in this case: 'body') and if this container has
overflow: hidden
then the flag would be actually hidden.

But as you can see, it does not work.

Thank you for your attention.

p.s:


  1. If you change the flag of the "phone1" input, you will have to change the "initialCountry" value manually for the "hiden" input. (I will fix this later).

  2. I already looked for a plugin with both features (from jquery mask and intlTellInput), and I did not find, but if you know one, please tell me.


Answer Source

You could select the input element with jquery, and hide its parent. Works in my example:

Code required: $('input.hide').parent().hide();

Please note you will probably need a better class then hide because using my exact method will cause side-effects if you hide other input fields. Try a class like hide-parent instead. I've just used this because it works in your example.

Example:

/* INITIALIZE BOTH INPUTS WITH THE intlTelInput FEATURE*/

$("#phone1").intlTelInput({
    initialCountry: "us",
    separateDialCode: true,
    preferredCountries: ["fr", "us", "gb"],
    geoIpLookup: function (callback) {
        $.get('https://ipinfo.io', function () {
        }, "jsonp").always(function (resp) {
            var countryCode = (resp && resp.country) ? resp.country : "";
            callback(countryCode);
        });
    },
    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.14/js/utils.js"
});


$("#hiden").intlTelInput({
    initialCountry: "us",
    dropdownContainer: 'body',
    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.14/js/utils.js"
});


/* ADD A MASK IN PHONE1 INPUT (when document ready and when changing flag) FOR A BETTER USER EXPERIENCE */

var mask1 = $("#phone1").attr('placeholder').replace(/[0-9]/g, 0);

$(document).ready(function () {
    $('#phone1').mask(mask1)
});

$("#phone1").on("countrychange", function (e, countryData) {
    $("#phone1").val('');
    var mask1 = $("#phone1").attr('placeholder').replace(/[0-9]/g, 0);
    $('#phone1').mask(mask1);
});


/*ON SUBMIT...*/

function submitForm(oFormElement) {


    document.getElementById("hiden").value = $("#phone1").val().replace(/\s+/g, ''); // REMOVE ALL THE SPACES OF PHONE1 VALUE
                                                                                     // PUT THE RESULT IN HIDEN INPUT 
                                                                                     // AND TEST THIS LATTER TO SEE IF IT FITS WITH
                                                                                     // the intlTelInput NUMBER FORMAT

    //alert($("#hiden").val());


    // AND IT WILL DISPLAY OK
    if ($("#hiden").intlTelInput("isValidNumber") == true) {
        alert("OK");
        return true;
    }
    else {
        alert("NOT OK");
        return false;
    }

}

$('input.hide').parent().hide();
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.14/css/intlTelInput.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.14/js/utils.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.14/js/intlTelInput.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.js"></script>


<form action="" method="POST" onsubmit="return submitForm(this);">

    <input type="tel"name ="phone1" id="phone1" value="<?php echo $phone1;?>">

    <input type="tel" class="hide" id="hiden">

    <button type="submit">Validate</button>

</form>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download