src/index.html

@@ -12,9 +12,10 @@
       <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)">
+      <input name="zip" id="zip" type="text" required placeholder="ZIP code (12-345)" pattern="\d{2}-\d{3}">
 
       <input name="password" id="password" type="password" required placeholder="Password (Pa$Sw0rD)">
       <div id="password-check">

src/main.js

@@ -41,34 +41,23 @@ document.addEventListener("DOMContentLoaded", () => {
       const formData = new FormData(form);
       const formDataValue = formData.values();
       const [email, country, zip] = Array(5).fill(formDataValue.next().value);
-      setTimeout(() => {
       alert(
         `Success!\nEmail: ${email}\nCountry: ${country}\nZIP: ${zip}\nPassword: [redacted]`,
       );
-      }, 600);
     } else {
       alert("Hold up, one or more fields are invalid! Try again");
     }
   });
-
   countryInput.addEventListener("input", () => {
-    const valid = countryInput.value.search(COUNTRY_REGEX) >= 0;
-    countryInput.setAttribute("input-valid", valid);
-    if (valid) {
-      countryInput.setCustomValidity("");
-    } else {
-      countryInput.setCustomValidity("Invalid country");
-    }
+    countryInput.setAttribute(
+      "input-valid",
+      countryInput.value.search(COUNTRY_REGEX) >= 0,
+    );
   });
 
-  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");
-    }
+  countryInput.addEventListener("change", () => {
+    document.querySelector("#country-info").textContent =
+      countryInput.value.search(COUNTRY_REGEX) >= 0 ? "" : "Invalid country";
   });
 
   passwordInput.addEventListener("input", checkPasswordValidity);

src/password.js

@@ -19,20 +19,18 @@ function checkPasswordMatch() {
     passwordInput.value === ""
   ) {
     passwordMatch.style.backgroundColor = "";
-    passwordConfirmInput.setCustomValidity("Passwords don't match");
     return false;
   }
   passwordMatch.style.backgroundColor = "#4b4";
-  passwordConfirmInput.setCustomValidity("");
   return true;
 }
 
-function checkPasswordRequirement(regex, requirementElement) {
-  if (passwordInput.value.search(regex) >= 0) {
-    requirementElement.style.backgroundColor = "#4b4";
+function checkPasswordRequirement(e, regex, element) {
+  if (e.value.search(regex) >= 0) {
+    element.style.backgroundColor = "#4b4";
     return true;
   }
-  requirementElement.style.backgroundColor = "";
+  element.style.backgroundColor = "";
   return false;
 }
 
@@ -43,18 +41,23 @@ function checkPasswordValidity() {
   } else {
     passwordLength.style.backgroundColor = "";
   }
-  const lowercase = checkPasswordRequirement(/[a-z]/, passwordLowercase);
-  const uppercase = checkPasswordRequirement(/[A-Z]/, passwordUppercase);
-  const number = checkPasswordRequirement(/\d/, passwordNumber);
-  const special = checkPasswordRequirement(/[#?!@$%^&*-]/, passwordSpecial);
-  const suitsRequirements =
-    length && lowercase && uppercase && number && special;
-  if (suitsRequirements) {
-    passwordInput.setCustomValidity("");
-  } else {
-    passwordInput.setCustomValidity("Password does not meet requirements");
-  }
-  return suitsRequirements;
+  const lowercase = checkPasswordRequirement(
+    passwordInput,
+    /[a-z]/,
+    passwordLowercase,
+  );
+  const uppercase = checkPasswordRequirement(
+    passwordInput,
+    /[A-Z]/,
+    passwordUppercase,
+  );
+  const number = checkPasswordRequirement(passwordInput, /\d/, passwordNumber);
+  const special = checkPasswordRequirement(
+    passwordInput,
+    /[#?!@$%^&*-]/,
+    passwordSpecial,
+  );
+  return length && lowercase && uppercase && number && special;
 }
 
 export { checkPasswordValidity, checkPasswordMatch };