From 84cb547df8d085209d1f4d67e70866f7a14c4f56 Mon Sep 17 00:00:00 2001
From: NetMan <13informatyka14@gmail.com>
Date: Sat, 24 Feb 2024 17:45:32 +0100
Subject: [PATCH] Constraint API: using setCustomValidity for country & ZIP

---
 src/index.html |  3 +--
 src/main.js    | 23 ++++++++++++++++-------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/index.html b/src/index.html
index c92860e..151ce5c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -12,10 +12,9 @@
       <input name="email" id="email" type="email" required placeholder="Email (christopher@example.com)">
 
       <input name="country" id="country" type="text" list="countries-list" required placeholder="Country (United Kingdom)">
-      <output id="country-info"></output>
       <datalist id="countries-list"></datalist>
 
-      <input name="zip" id="zip" type="text" required placeholder="ZIP code (12-345)" pattern="\d{2}-\d{3}">
+      <input name="zip" id="zip" type="text" required placeholder="ZIP code (12-345)">
 
       <input name="password" id="password" type="password" required placeholder="Password (Pa$Sw0rD)">
       <div id="password-check">
diff --git a/src/main.js b/src/main.js
index 93a3a99..a89e82d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -48,16 +48,25 @@ document.addEventListener("DOMContentLoaded", () => {
       alert("Hold up, one or more fields are invalid! Try again");
     }
   });
+
   countryInput.addEventListener("input", () => {
-    countryInput.setAttribute(
-      "input-valid",
-      countryInput.value.search(COUNTRY_REGEX) >= 0,
-    );
+    const valid = countryInput.value.search(COUNTRY_REGEX) >= 0;
+    countryInput.setAttribute("input-valid", valid);
+    if (valid) {
+      countryInput.setCustomValidity("");
+    } else {
+      countryInput.setCustomValidity("Invalid country");
+    }
   });
 
-  countryInput.addEventListener("change", () => {
-    document.querySelector("#country-info").textContent =
-      countryInput.value.search(COUNTRY_REGEX) >= 0 ? "" : "Invalid country";
+  zipInput.addEventListener("input", () => {
+    const valid = zipInput.value.search(/\d{2}-\d{3}/) >= 0;
+    zipInput.setAttribute("input-valid", valid);
+    if (valid) {
+      zipInput.setCustomValidity("");
+    } else {
+      zipInput.setCustomValidity("ZIP Code format should be 12-345");
+    }
   });
 
   passwordInput.addEventListener("input", checkPasswordValidity);