[WFK2-833] - In contacts-mobile-basic, fix phone number validation so…

… that the correct flag is displayed for a given country dial code. Update the plugin used for phone number validation.

contacts-mobile-basic/src/main/webapp/index.html

@@ -39,7 +39,7 @@
 <!--     <link rel="stylesheet" href="css/validator.min.css" type="text/css" media="all" /> -->
 
     <!-- This is the CSS for the International Telephone Input plugin. -->
-    <link rel="stylesheet" href="css/intlTelInput-3.7.1.css">
+    <link rel="stylesheet" href="css/intlTelInput-4.0.1.css">
 
     <!-- Import the custom JavaScript -->
     <script src="js/namespace.js"></script>
@@ -65,11 +65,11 @@
 <!--     <script src="js/libs/additional-methods-1.13.1.min.js"></script> -->
 <!--     <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/additional-methods.js"></script> -->
 
-    <!-- The jQuery Validator plugin does not cover enough of the phone number use cases. The intlTelInput plugin was
+    <!-- The jQuery Validator plugin does not cover enough of the phone number use cases. The intlTelInput plugin was used
          instead as it covers all forms of phone numbers. -->
-    <script src="js/libs/intlTelInput-libPhoneNumber-3.7.1.js"></script>
-    <script src="js/libs/intlTelInput-3.7.1.js"></script>
-<!--     <script src="js/libs/intlTelInput-3.7.1.min.js"></script> -->
+    <script src="js/libs/intlTelInput-libPhoneNumber-4.0.1.js"></script>
+    <script src="js/libs/intlTelInput-4.0.1.js"></script>
+<!--     <script src="js/libs/intlTelInput-4.0.1.min.js"></script> -->
 
     <!-- Because the mobileinit event is triggered immediately, you'll need to bind your event handler 
          before jQuery Mobile is loaded. 

contacts-mobile-basic/src/main/webapp/js/app.js

@@ -207,6 +207,10 @@ $( document ).on( "pagecreate", function(mainEvent) {
     CONTACTS.app.buildContactDetail = function(contact) {
         console.log(getCurrentTime() + " [js/app.js] (buildContactDetail) - start");
 
+        // The intl-Tel-Input plugin stores the lasted used country code and uses it to predetermin the flag to be 
+        // displayed. So we remove the plugin before the data gets loaded in the Edit form and then initialize it after. 
+        $("#contacts-edit-input-tel").intlTelInput("destroy");
+
         // Put each field value in the text input on the page.
         $('#contacts-edit-input-firstName').val(contact.firstName);
         $('#contacts-edit-input-lastName').val(contact.lastName);
@@ -215,6 +219,10 @@ $( document ).on( "pagecreate", function(mainEvent) {
         $('#contacts-edit-input-date').val(contact.birthDate);
         $('#contacts-edit-input-id').val(contact.id);
 
+        // The intl-Tel-Input plugin needs to be initialized everytime the data gets loaded into the Edit form so that 
+        // it will correctly validate it and display the correct flag.
+        $('#contacts-edit-input-tel').intlTelInput({nationalMode:false});
+
         console.log(getCurrentTime() + " [js/app.js] (buildContactDetail) - end");
         // Add in a line to visually see when we are done.
         console.log("-----------------------------Update Page---------------------------------------");