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 @@
-
-
+
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);