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

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

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

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

I will post the code in detail

Yes please

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à:

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(…)

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"

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

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"
      });

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.

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

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();

When I lose focus, there are two requests !

How to prevent the second ?

POST http://localhost/dooTest/DOMEvent.doo?&Event=blur&ObjAddr=test_scx-tel&UserID=68N0NZ99A&PageInit=&nReq=7&ValueType=string&Value='+336123456789'

POST http://localhost/dooTest/DOMEvent.doo?&Event=blur&ObjAddr=test_scx-tel&UserID=68N0NZ99A&PageInit=&nReq=8&ValueType=string&Value='6123456789'

procedure textBox.valid()
if thisForm.wlHTMLgen
  return .F. && this.wcHTMLgen() sets this event handler
endif
…

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

does it work now?

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

isValidNumber returns a Boolean -- you have this example

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...

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

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

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

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

Not perfect yet, resizing control not working

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

// by
jQuery("#<<.wcID>>").css("width", "12.5em");

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

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

why do you use .promise.then()?

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

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

The power of FIC ...

cool, thanks for the feedback!