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