validation requires a valid selected country

jackocnr · Aug 23, 2024 · f8eab5a · f8eab5a
1 parent 5ac5690
commit f8eab5a
Show file tree

Hide file tree

Showing 20 changed files with 278 additions and 122 deletions.
diff --git a/build/css/demo.css b/build/css/demo.css
@@ -70,4 +70,19 @@ input::placeholder {
     --iti-path-globe-1x: url("../img/globe_light.webp");
     --iti-path-globe-2x: url("../img/[email protected]");
   }
+}
+#error-msg {
+  color: red;
+}
+
+#valid-msg {
+  color: #00c900;
+}
+
+input.error {
+  border: 1px solid #ff7c7c;
+}
+
+.hide {
+  display: none;
 }
diff --git a/build/js/intlTelInput.js b/build/js/intlTelInput.js
@@ -2994,6 +2994,9 @@ var factoryOutput = (() => {
     }
     //* Validate the input val
     isValidNumber() {
+      if (!this.selectedCountryData.iso2) {
+        return false;
+      }
       const val = this._getFullNumber();
       const alphaCharPosition = val.search(/\p{L}/u);
       if (alphaCharPosition > -1) {
@@ -3009,6 +3012,9 @@ var factoryOutput = (() => {
     }
     //* Validate the input val (precise)
     isValidNumberPrecise() {
+      if (!this.selectedCountryData.iso2) {
+        return false;
+      }
       const val = this._getFullNumber();
       const alphaCharPosition = val.search(/\p{L}/u);
       if (alphaCharPosition > -1) {

diff --git a/build/js/intlTelInput.min.js b/build/js/intlTelInput.min.js
diff --git a/build/js/intlTelInputWithUtils.js b/build/js/intlTelInputWithUtils.js
@@ -2993,6 +2993,9 @@ var factoryOutput = (() => {
     }
     //* Validate the input val
     isValidNumber() {
+      if (!this.selectedCountryData.iso2) {
+        return false;
+      }
       const val = this._getFullNumber();
       const alphaCharPosition = val.search(/\p{L}/u);
       if (alphaCharPosition > -1) {
@@ -3008,6 +3011,9 @@ var factoryOutput = (() => {
     }
     //* Validate the input val (precise)
     isValidNumberPrecise() {
+      if (!this.selectedCountryData.iso2) {
+        return false;
+      }
       const val = this._getFullNumber();
       const alphaCharPosition = val.search(/\p{L}/u);
       if (alphaCharPosition > -1) {
@@ -9240,7 +9246,7 @@ var factoryOutput = (() => {
         b = "";
         for (let e = 0; e < c.length; e++) d.ja = ob(d, c.charAt(e)), b = d.ja;
         return b;
-      } catch (c) {
+      } catch {
         return a;
       }
     });
@@ -9249,7 +9255,7 @@ var factoryOutput = (() => {
         const e = J.g(), f = X(e, a, b);
         var d = W(e, f, -1);
         return 0 == d || 4 == d ? e.format(f, "undefined" === typeof c ? 0 : c) : a;
-      } catch (e) {
+      } catch {
         return a;
       }
     });
@@ -9272,14 +9278,14 @@ var factoryOutput = (() => {
           h = null;
         }
         return l.format(h, d ? 0 : b ? 2 : 1);
-      } catch (l) {
+      } catch {
         return "";
       }
     });
     m("intlTelInputUtilsTemp.getExtension", (a, b) => {
       try {
         return r(X(J.g(), a, b), 3);
-      } catch (c) {
+      } catch {
         return "";
       }
     });
@@ -9293,11 +9299,12 @@ var factoryOutput = (() => {
           e = ab(f, d);
         }
         return e;
-      } catch (g) {
+      } catch {
         return -99;
       }
     });
     m("intlTelInputUtilsTemp.getValidationError", (a, b) => {
+      if (!b) return 1;
       try {
         const c = J.g(), d = X(c, a, b);
         return W(c, d, -1);
@@ -9317,7 +9324,7 @@ var factoryOutput = (() => {
           g = -1 != ab(h, f);
         }
         return g;
-      } catch (l) {
+      } catch {
         return false;
       }
     });
@@ -9333,14 +9340,14 @@ var factoryOutput = (() => {
           return f;
         }
         return 0 === W(d, e, -1);
-      } catch (d) {
+      } catch {
         return false;
       }
     });
     m("intlTelInputUtilsTemp.getCoreNumber", (a, b) => {
       try {
         return r(X(J.g(), a, b), 2).toString();
-      } catch (c) {
+      } catch {
         return "";
       }
     });

diff --git a/build/js/intlTelInputWithUtils.min.js b/build/js/intlTelInputWithUtils.min.js
diff --git a/build/js/utils.js b/build/js/utils.js
diff --git a/demo.html b/demo.html
@@ -12,7 +12,9 @@
     <h1>International Telephone Input</h1>
     <form>
       <input id="phone" name="phone" type="tel" value="" />
-      <button class="button" type="submit">Submit</button>
+      <button class="button" id="btn" type="button">Validate</button>
+      <span id="valid-msg" class="hide"></span>
+      <span id="error-msg" class="hide"></span>
     </form>
 
     <script src="build/js/intlTelInputWithUtils.js"></script>
@@ -52,6 +54,44 @@ <h1>International Telephone Input</h1>
         // validationNumberType: null,
       });
       window.iti = iti; // useful for testing
+
+      const button = document.querySelector("#btn");
+      const errorMsg = document.querySelector("#error-msg");
+      const validMsg = document.querySelector("#valid-msg");
+      const errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];
+
+      const reset = () => {
+        input.classList.remove("error");
+        errorMsg.innerHTML = "";
+        validMsg.innerHTML = "";
+        errorMsg.classList.add("hide");
+        validMsg.classList.add("hide");
+      };
+
+      const showError = (msg) => {
+        input.classList.add("error");
+        errorMsg.innerHTML = msg;
+        errorMsg.classList.remove("hide");
+      };
+
+      // on click button: validate
+      button.addEventListener('click', () => {
+        reset();
+        if (!input.value.trim()) {
+          showError("Required");
+        } else if (iti.isValidNumber()) {
+          validMsg.innerHTML = "Valid number: " + iti.getNumber();
+          validMsg.classList.remove("hide");
+        } else {
+          const errorCode = iti.getValidationError();
+          const msg = errorMap[errorCode] || "Invalid number";
+          showError(msg);
+        }
+      });
+
+      // on keyup / change flag: reset
+      input.addEventListener('change', reset);
+      input.addEventListener('keyup', reset);
     </script>
   </body>
 </html>
diff --git a/react/build/IntlTelInput.cjs b/react/build/IntlTelInput.cjs
@@ -2989,6 +2989,9 @@ var Iti = class {
   }
   //* Validate the input val
   isValidNumber() {
+    if (!this.selectedCountryData.iso2) {
+      return false;
+    }
     const val = this._getFullNumber();
     const alphaCharPosition = val.search(/\p{L}/u);
     if (alphaCharPosition > -1) {
@@ -3004,6 +3007,9 @@ var Iti = class {
   }
   //* Validate the input val (precise)
   isValidNumberPrecise() {
+    if (!this.selectedCountryData.iso2) {
+      return false;
+    }
     const val = this._getFullNumber();
     const alphaCharPosition = val.search(/\p{L}/u);
     if (alphaCharPosition > -1) {

diff --git a/react/build/IntlTelInput.js b/react/build/IntlTelInput.js
@@ -2953,6 +2953,9 @@ var Iti = class {
   }
   //* Validate the input val
   isValidNumber() {
+    if (!this.selectedCountryData.iso2) {
+      return false;
+    }
     const val = this._getFullNumber();
     const alphaCharPosition = val.search(/\p{L}/u);
     if (alphaCharPosition > -1) {
@@ -2968,6 +2971,9 @@ var Iti = class {
   }
   //* Validate the input val (precise)
   isValidNumberPrecise() {
+    if (!this.selectedCountryData.iso2) {
+      return false;
+    }
     const val = this._getFullNumber();
     const alphaCharPosition = val.search(/\p{L}/u);
     if (alphaCharPosition > -1) {

diff --git a/react/build/IntlTelInputWithUtils.cjs b/react/build/IntlTelInputWithUtils.cjs
@@ -2989,6 +2989,9 @@ var Iti = class {
   }
   //* Validate the input val
   isValidNumber() {
+    if (!this.selectedCountryData.iso2) {
+      return false;
+    }
     const val = this._getFullNumber();
     const alphaCharPosition = val.search(/\p{L}/u);
     if (alphaCharPosition > -1) {
@@ -3004,6 +3007,9 @@ var Iti = class {
   }
   //* Validate the input val (precise)
   isValidNumberPrecise() {
+    if (!this.selectedCountryData.iso2) {
+      return false;
+    }
     const val = this._getFullNumber();
     const alphaCharPosition = val.search(/\p{L}/u);
     if (alphaCharPosition > -1) {
@@ -9236,7 +9242,7 @@ var intl_tel_input_default = intlTelInput;
       b = "";
       for (let e = 0; e < c.length; e++) d.ja = ob(d, c.charAt(e)), b = d.ja;
       return b;
-    } catch (c) {
+    } catch {
       return a;
     }
   });
@@ -9245,7 +9251,7 @@ var intl_tel_input_default = intlTelInput;
       const e = J.g(), f = X(e, a, b);
       var d = W(e, f, -1);
       return 0 == d || 4 == d ? e.format(f, "undefined" === typeof c ? 0 : c) : a;
-    } catch (e) {
+    } catch {
       return a;
     }
   });
@@ -9268,14 +9274,14 @@ var intl_tel_input_default = intlTelInput;
         h = null;
       }
       return l.format(h, d ? 0 : b ? 2 : 1);
-    } catch (l) {
+    } catch {
       return "";
     }
   });
   m("intlTelInputUtilsTemp.getExtension", (a, b) => {
     try {
       return r(X(J.g(), a, b), 3);
-    } catch (c) {
+    } catch {
       return "";
     }
   });
@@ -9289,11 +9295,12 @@ var intl_tel_input_default = intlTelInput;
         e = ab(f, d);
       }
       return e;
-    } catch (g) {
+    } catch {
       return -99;
     }
   });
   m("intlTelInputUtilsTemp.getValidationError", (a, b) => {
+    if (!b) return 1;
     try {
       const c = J.g(), d = X(c, a, b);
       return W(c, d, -1);
@@ -9313,7 +9320,7 @@ var intl_tel_input_default = intlTelInput;
         g = -1 != ab(h, f);
       }
       return g;
-    } catch (l) {
+    } catch {
       return false;
     }
   });
@@ -9329,14 +9336,14 @@ var intl_tel_input_default = intlTelInput;
         return f;
       }
       return 0 === W(d, e, -1);
-    } catch (d) {
+    } catch {
       return false;
     }
   });
   m("intlTelInputUtilsTemp.getCoreNumber", (a, b) => {
     try {
       return r(X(J.g(), a, b), 2).toString();
-    } catch (c) {
+    } catch {
       return "";
     }
   });