FoxInCloud
International phone number
Gravatar is a globally recognized avatar based on your email address. International phone number
  Vincent H.
  All
  Jan 10, 2022 @ 09:50am

Hi Thierry,

Users often mis-type the prefix of an international phone number, and I spotted this plugin that seems to meet the need:

International Telephone Input with Flags and Dial Codes

2 questions:

  • has anyone implemented it already, or something similar ?
  • if I try to integrate it into FiC, how do I get the value entered ? Something like this ?
jQuery('#MyDate').onblur(function(event){FoxInCloud.EventRequest('DOMEvent', event, this, jQuery(this).iti.getNumber(), "<<THIS.wcID>>");})

Thanks in advance

Gravatar is a globally recognized avatar based on your email address. re: International phone number
  FoxInCloud Support - Thierry N.
  Vincent H.
  Jan 12, 2022 @ 02:45am

Hi Vincent,

Just taken a look at the documentation, could not understand how it's designed and works. Not sure how you can use it.

If server knows the expected format, you can simply use an HTML5 <input type="tel"> (https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/tel):

Otherwise you would implement this event handler:

if thisForm.wlHTMlgen
  local cScript
  text to cScript textmerge noshow flags 1
var $input = jQuery('#<<this.wcID>>'), input = $input[0], iti = window.intlTelInput(input, {
  // your options
});
$input.blur(function(event){return FoxInCloud.DOMEvent.bind(FoxInCloud)(iti.getNumber(), false, event);});
  endtext
  return m.cScript
endif
Gravatar is a globally recognized avatar based on your email address. re: International phone number
  Vincent H.
  FoxInCloud Support - Thierry N.
  Jan 12, 2022 @ 11:13am

Thanks Thierry, it works well. But in JS (apparently not in jQuery).

If anyone is interested, I will post the code in detail.

Gravatar is a globally recognized avatar based on your email address. re: International phone number
  FoxInCloud Support - Thierry N.
  Vincent H.
  Jan 13, 2022 @ 01:53am

I will post the code in detail

Yes please

Gravatar is a globally recognized avatar based on your email address. re: International phone number
  Vincent H.
  FoxInCloud Support - Thierry N.
  Jan 13, 2022 @ 02:44am
  1. Add intlTelInput.min.css, intlTelInput.min.js and utils.js in xxxServer.prg

  2. Copy flags.png and flags@2x.png in the [/Images] subfolders of the site

  3. Modify the relative path of these files in intlTelInput.min.css with [../Images]

  4. textbox.wcHTMLGEN()

IF VARTYPE (toHTMLgen) = "O"
    TEXT TO cScript TEXTMERGE NOSHOW FLAGS 1
       var input = document.querySelector ("#<<THIS.wcId>>");
       window.intlTelInput (input, {
          preferredCountries: ['fr'],
          utilsScript: "utils.js",
       });
       input.blur (function (event) {return FoxInCloud.DOMEvent.bind (FoxInCloud) (iti.getNumber (), false, event);});
    ENDTEXT
    toHTMLgen.cScriptJSAdd (m.cScript)
ENDIF

Et voilà:

Gravatar is a globally recognized avatar based on your email address. re: International phone number
  FoxInCloud Support - Thierry N.
  Vincent H.
  Jan 13, 2022 @ 03:06am

I wonder how this can work:

input.blur (function (event) {return FoxInCloud.DOMEvent.bind (FoxInCloud) (iti.getNumber (), false, event);});
  1. input.blur() executes the .blur() function instead of assigning a handler to the .blur() event -- you should use jQuery(input).blur() instead
  2. iti is not defined -- should be the value returned by window.intlTelInput():
var iti = window.intlTelInput(…)
Gravatar is a globally recognized avatar based on your email address. re: International phone number
  Vincent H.
  FoxInCloud Support - Thierry N.
  Jan 13, 2022 @ 04:59am

You are of course right, I went too fast 😉

var iti = window.intlTelInput(…) doesn't work ... In my FireFox console: "ReferenceError: iti is not defined"

Gravatar is a globally recognized avatar based on your email address. re: International phone number
  Vincent H.
  Vincent H.
  Jan 13, 2022 @ 09:09am

I tried this, but the saved value does not contain the country prefix.

So blur is treated badly and I don't know what to try.

IF VARTYPE (toHTMLgen) = "O"
   TEXT TO cScript TEXTMERGE NOSHOW FLAGS 1
      var input = document.querySelector("#<<THIS.wcId>>");
      var iti = window.intlTelInput(input, {
         preferredCountries: ['fr'],
         utilsScript: "utils.js",
      });
      jQuery(input).blur(function(event){return FoxInCloud.DOMEvent.bind(FoxInCloud)(iti.getNumber(), false, event);});
   ENDTEXT
   toHTMLgen.cScriptJSAdd(m.cScript)
ENDIF
Gravatar is a globally recognized avatar based on your email address. re: International phone number
  FoxInCloud Support - Thierry N.
  Vincent H.
  Jan 13, 2022 @ 09:15am

You have an extra coma after "utils.js":

 var iti = window.intlTelInput(input, {
         preferredCountries: ['fr'],
         utilsScript: "utils.js",
      });

This is why I prefer comas at BOL, more noticeable:

 var iti = window.intlTelInput(input, {
         preferredCountries: ['fr']
      ,  utilsScript: "utils.js"
      });
Gravatar is a globally recognized avatar based on your email address. re: International phone number
  Vincent H.
  FoxInCloud Support - Thierry N.
  Jan 13, 2022 @ 09:21am

Damned, thanks !

But my problem is still the same.

When I leave the focus, I quickly see the prefix but the value saved in the controlSource does not contain it.

Gravatar is a globally recognized avatar based on your email address. re: International phone number
  FoxInCloud Support - Thierry N.
  Vincent H.
  Jan 13, 2022 @ 09:23am

.getNumber() is probably not the right, and/or the only method; that's what I found confusing in the doc.

Gravatar is a globally recognized avatar based on your email address. re: International phone number
  Vincent H.
  FoxInCloud Support - Thierry N.
  Jan 13, 2022 @ 09:29am

However, when I type in the console, the retrieved value is indeed in international format.

var input = document.querySelector("#test_scx-tel");
var iti = intlTelInput(input)
iti.getNumber();
Gravatar is a globally recognized avatar based on your email address. re: International phone number
  FoxInCloud Support - Thierry N.
  Vincent H.
  Jan 14, 2022 @ 12:15am
procedure textBox.valid()
if thisForm.wlHTMLgen
  return .F. && this.wcHTMLgen() sets this event handler
endif
…
Gravatar is a globally recognized avatar based on your email address. re: International phone number
  Vincent H.
  FoxInCloud Support - Thierry N.
  Jan 14, 2022 @ 12:31am

Thanks Thierry, I had tried, without success, in lostFocus()

Gravatar is a globally recognized avatar based on your email address. re: International phone number
  FoxInCloud Support - Thierry N.
  Vincent H.
  Jan 14, 2022 @ 01:35am

does it work now?

Gravatar is a globally recognized avatar based on your email address. re: International phone number
  Vincent H.
  FoxInCloud Support - Thierry N.
  Jan 14, 2022 @ 02:00am

One step forward, two steps back...

What would also be interesting is to be able to retrieve the value passed by isValidNumber()

I waste a lot of time but I am convinced that this library is worth it

Gravatar is a globally recognized avatar based on your email address. re: International phone number
  Vincent H.
  FoxInCloud Support - Thierry N.
  Jan 14, 2022 @ 02:25am

Yes, excellent example.

To be combined with a value of the field = getNumber() and information concerning the error which must not go out of control.

A little too complex for me...

Gravatar is a globally recognized avatar based on your email address. re: International phone number
  Vincent H.
  FoxInCloud Support - Thierry N.
  Jan 14, 2022 @ 10:28am

I come up against a new difficulty, which has already kept me busy...

During the first launch of the screen, no problem, the number is displayed in the correct format with the correct flag.

But on the next launch, the flag does not refresh.

I included some code in the Refresh_() which works fine in the FireFox console but not in my screen.

Why does this code not work?

WITH THIS
   IF wlLAN() .OR. EMPTY (.wcID)   && vide parfois ?
      RETURN
   ENDIF   
   LOCAL cScript
   TEXT TO cScript TEXTMERGE NOSHOW FLAGS 1
      var input = document.querySelector("#<<.wcId>>");
      var iti = window.intlTelInputGlobals.getInstance(input);
      if(typeof iti != 'undefined') iti.setNumber(iti.getNumber())
   ENDTEXT
   THISFORM.wcScriptJSadd(m.cScript)
ENDWITH
Gravatar is a globally recognized avatar based on your email address. re: International phone number
  Vincent H.
  Vincent H.
  Jan 15, 2022 @ 03:40am

asynchronous loading problem... I'm on the way...

Gravatar is a globally recognized avatar based on your email address. re: International phone number
  Vincent H.
  Vincent H.
  Jan 15, 2022 @ 10:24am

I added number validation, with either a green tick or a red cross.

Not perfect yet, resizing control not working.

Here is my wcHTMLgen() code:

IF VARTYPE (toHTMLgen) = Cobjet
   LOCAL cScript
   WITH THIS
      TEXT TO cScript TEXTMERGE NOSHOW FLAGS 1
         var input = document.querySelector("#<<.wcId>>");
         var iti = window.intlTelInput(input, {
            preferredCountries: ['fr'],
            utilsScript: 'utils.js'
         });
         iti.promise.then(function() {
            iti.setNumber(iti.getNumber());
            jQuery("<<#.wcId>>").css("width", "12.5em");
         });
         input.addEventListener('blur', function() {
            if (iti.isValidNumber()) {
               jQuery("#<<.Parent.Telvalid.wcId>> span").removeClass().addClass("fa fa-check text-success text-lg")
            } else {
               jQuery("#<<.Parent.Telvalid.wcId>> span").removeClass().addClass("fa fa-times text-danger text-lg")
            }
         });
         jQuery(input).blur(function(event){return FoxInCloud.DOMEvent.bind(FoxInCloud)(iti.getNumber(), false, event); event.stopPropagation();});
      ENDTEXT
   ENDWITH
   toHTMLgen.cScriptJSAdd(m.cScript)
ENDIF

Gravatar is a globally recognized avatar based on your email address. re: International phone number
  Vincent H.
  Vincent H.
  Jan 15, 2022 @ 11:25am

The tick or the cross should only appear when typing, not when only displaying.

And I added an alert window (notify.js)

IF VARTYPE (toHTMLgen) = Cobjet
   LOCAL cScript, Mnotify
   Mnotify = wNOTIFY ("Le numéro de téléphone saisi n'est pas valide", "Téléphone", 48, THISFORM, .F., 1000, .T.)
   WITH THIS
      TEXT TO cScript TEXTMERGE NOSHOW FLAGS 1
         var input = document.querySelector("#<<.wcId>>");
         var iti = window.intlTelInput(input, {
            preferredCountries: ['fr'],
            utilsScript: 'utils.js'
         });
         iti.promise.then(function() {
            iti.setNumber(iti.getNumber());
            jQuery("<<#.wcId>>").css("width", "12.5em");
         });
         input.addEventListener('blur', function() {
            if (iti.isValidNumber()) {
               jQuery("#<<.Parent.Telvalid.wcId>> span").removeClass().addClass("fa fa-check text-success text-lg").css("visibility", "visible");
            } else {
               jQuery("#<<.Parent.Telvalid.wcId>> span").removeClass().addClass("fa fa-times text-danger text-lg").css("visibility", "visible");
               <<Mnotify>>;
            }
         });
         jQuery(input).blur(function(event){return FoxInCloud.DOMEvent.bind(FoxInCloud)(iti.getNumber(), false, event); event.stopPropagation();});
      ENDTEXT
   ENDWITH
   toHTMLgen.cScriptJSAdd(m.cScript)
ENDIF

Gravatar is a globally recognized avatar based on your email address. re: International phone number
  FoxInCloud Support - Thierry N.
  Vincent H.
  Jan 17, 2022 @ 12:22am

Not perfect yet, resizing control not working

// replace
jQuery("<<#.wcId>>").css("width", "12.5em");

// by
jQuery("#<<.wcID>>").css("width", "12.5em");
Gravatar is a globally recognized avatar based on your email address. re: International phone number
  Vincent H.
  FoxInCloud Support - Thierry N.
  Jan 17, 2022 @ 12:26am

Yes, Thierry. En fact, my code evolved like this:

wcHTMLgen()

IF VARTYPE (toHTMLgen) = Cobjet
   LOCAL cScript, Mnotify, Mid, Mtype, Miti, Minput
   Mid = SansTiret_ (SYS (2015))
   Mtype = IIF (Cdooxi $ Msys16 .AND. ALIAS() = "FICL" .AND. Mpad = "VI" .AND. .NOT. EMPTY (Vi.Id_partner) .AND. IsEmpty ("Mmode_part"), "password", "text")
   Mnotify = wNOTIFY ("Le numéro de téléphone saisi n'est pas valide", "Téléphone", 48, THISFORM, .F., 1000, .T.)
   WITH THIS
      Miti = LOWER (.Name)   && Une variable / instance !
      Minput = m.Miti + "_put"
      TEXT TO cScript TEXTMERGE NOSHOW FLAGS 1
         var <<m.Minput>> = document.querySelector("#<<.wcId>>");
         var <<m.Miti>> = window.intlTelInput(<<m.Minput>>, {
            preferredCountries: ['fr'],
            utilsScript: 'utils.js'
         });
         <<m.Miti>>.promise.then(function() {
            <<m.Miti>>.setNumber(<<m.Miti>>.getNumber());
            jQuery("#<<.wcId>>").css("width", "12.3em");
	    jQuery("#<<.wcId>>").attr("type", "<<m.Mtype>>");
            jQuery("#<<.wcId>>").prev().append('<span class="fa fa-check text-success text-lg" aria-hidden="true" style="visibility: hidden;position: absolute;margin-top: -25px;margin-left: 13em;font-size: small;z-index: 2;" id="<<m.Mid>>"></span>');
         });
         <<m.Minput>>.addEventListener('blur', function() {
            if (<<m.Miti>>.isValidNumber()) {
               jQuery("#<<m.Mid>>").removeClass().addClass("fa fa-check text-success text-lg").css("visibility", "visible");
            } else {
               jQuery("#<<m.Mid>>").removeClass().addClass("fa fa-times text-danger text-lg").css("visibility", "visible");
               <<m.Mnotify>>;
            }
         });
         jQuery(<<m.Minput>>).blur(function(event){return FoxInCloud.DOMEvent.bind(FoxInCloud)(<<m.Miti>>.getNumber(), false, event); event.stopPropagation();});
      ENDTEXT
   ENDWITH
   toHTMLgen.cScriptJSAdd(m.cScript)
ENDIF

Gravatar is a globally recognized avatar based on your email address. re: International phone number
  FoxInCloud Support - Thierry N.
  Vincent H.
  Jan 17, 2022 @ 12:30am

Vincent,

please see my comments in code

IF VARTYPE (toHTMLgen) = Cobjet
   LOCAL cScript, Mnotify
   Mnotify = wNOTIFY ("Le numéro de téléphone saisi n'est pas valide", "Téléphone", 48, THISFORM, .F., 1000, .T.)
   WITH THIS
      TEXT TO cScript TEXTMERGE NOSHOW FLAGS 1
         var input = document.querySelector("#<<.wcId>>");
         var iti = window.intlTelInput(input, {
            preferredCountries: ['fr'],
            utilsScript: 'utils.js'
         });
         iti.promise.then(function() {
            iti.setNumber(iti.getNumber());
            jQuery("<<#.wcId>>").css("width", "12.5em");
         });
// `blur` fires when leaving the textbox only; `input` fires on every value change
         input.addEventListener('blur', function() {
            if (iti.isValidNumber()) {
               jQuery("#<<.Parent.Telvalid.wcId>> span").removeClass().addClass("fa fa-check text-success text-lg").css("visibility", "visible");
            } else {
               jQuery("#<<.Parent.Telvalid.wcId>> span").removeClass().addClass("fa fa-times text-danger text-lg").css("visibility", "visible");
               <<Mnotify>>;
            }
         });
// to execute, event.stopPropagation() must be before 'return …'
         jQuery(input).blur(function(event){event.stopPropagation(); return FoxInCloud.DOMEvent.bind(FoxInCloud)(iti.getNumber(), false, event);});
      ENDTEXT
   ENDWITH
   toHTMLgen.cScriptJSAdd(m.cScript)
ENDIF
Gravatar is a globally recognized avatar based on your email address. re: International phone number
  FoxInCloud Support - Thierry N.
  Vincent H.
  Jan 17, 2022 @ 12:32am

why do you use .promise.then()?

Gravatar is a globally recognized avatar based on your email address. re: International phone number
  Vincent H.
  FoxInCloud Support - Thierry N.
  Jan 17, 2022 @ 12:43am

I don't know, it was in an example.

Thanks for stopPropagation(), I have no more error !

Gravatar is a globally recognized avatar based on your email address. re: International phone number
  Vincent H.
  Vincent H.
  Jan 17, 2022 @ 01:01am

The power of FIC ...

Gravatar is a globally recognized avatar based on your email address. re: International phone number
  FoxInCloud Support - Thierry N.
  Vincent H.
  Jan 17, 2022 @ 01:17am

cool, thanks for the feedback!

© 1996-2022