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/globe_light@2x.webp");
  }
+}
+#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 "";
  }
  });