Refactor password validation and matching logic

MAIN.js

@@ -1,7 +1,4 @@
-const SubmitBtn = document.getElementById("submit-btn");
-const password = document.querySelector("#password");
-const repassed = document.querySelector("#password-con");
-const Message = document.getElementById("Message");
+/* 
 
 async function check() {
     let reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/;
@@ -39,3 +36,49 @@ SubmitBtn.addEventListener("click", (e) => {
         e.preventDefault();
     }
 });
+ */
+
+const submitBtn = document.getElementById("submit-btn");
+const passwordInput = document.querySelector("#password");
+const retypePasswordInput = document.querySelector("#password-con");
+const messageElement = document.getElementById("Message");
+
+async function isValidPassword(password) {
+    const reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/;
+    return reg.test(password);
+}
+
+function confirmPasswordMatch() {
+    const password = passwordInput.value;
+    const retypePassword = retypePasswordInput.value;
+
+    if (password === "" && retypePassword === "") {
+        showMessage("Password should be matched", "blue");
+        return false;
+    } else if (password === retypePassword) {
+        showMessage("Passwords match!", "green");
+        return true;
+    } else {
+        showMessage("Passwords do NOT match!", "red");
+        return false;
+    }
+}
+
+function showMessage(message, color) {
+    messageElement.textContent = message;
+    messageElement.style.color = color;
+}
+
+function checkPasswordMatch() {
+    passwordInput.addEventListener("input", confirmPasswordMatch);
+    retypePasswordInput.addEventListener("input", confirmPasswordMatch);
+}
+checkPasswordMatch();
+
+submitBtn.addEventListener("click", async (e) => {
+    const isPasswordValid = await isValidPassword(passwordInput.value);
+    const doPasswordsMatch = confirmPasswordMatch();
+    if (!isPasswordValid || !doPasswordsMatch) {
+        e.preventDefault();
+    }
+});

style.css

@@ -83,7 +83,7 @@ input {
   border: 1px solid #e5e7eb;
   border-radius: 10px;
 }
- input:valid {
+input:valid {
   outline: none;
   border: 1px solid #e5e7eb;
 }