Refactor form validation and add email validation

MAIN.js

@@ -42,11 +42,16 @@ const submitBtn = document.getElementById("submit-btn");
 const passwordInput = document.querySelector("#password");
 const retypePasswordInput = document.querySelector("#password-con");
 const messageElement = document.getElementById("Message");
+const email = document.querySelector("#email");
 
 async function isValidPassword(password) {
     const reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/;
     return reg.test(password);
 }
+function isValidEmail(email) {
+    const reg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return reg.test(email);
+}
 
 function confirmPasswordMatch() {
     const password = passwordInput.value;
@@ -73,12 +78,27 @@ 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) {
+    if (
+        !isPasswordValid ||
+        !doPasswordsMatch ||
+        !isValidEmail(emailInput.value)
+    ) {
         e.preventDefault();
     }
 });
+function checkEmailValidity() {
+    email.addEventListener("input", (event) => {
+        if (!isValidEmail(email.value)) {
+            email.setCustomValidity("Invalid email address!");
+        } else {
+            email.setCustomValidity("");
+        }
+    });
+}
+
+checkEmailValidity();
+checkPasswordMatch();

index.html

@@ -25,7 +25,7 @@ <h1>Tigheni</h1>
             <div class="head">
                 <h3>Join Us<span style="color: #2a8eec">!</span></h3>
             </div>
-            <form class="form-section" method="get">
+            <form class="form-section" method="post">
                 <h3>Let's do this!</h3>
                 <div class="body_form">
                     <div class="flex-label">
@@ -34,6 +34,7 @@ <h3>Let's do this!</h3>
                             type="text"
                             id="first-name"
                             name="f-name"
+                            minlength="3"
                             placeholder="YOUR FIRST NAME"
                         />
                     </div>
@@ -44,6 +45,7 @@ <h3>Let's do this!</h3>
                             type="text"
                             id="last-name"
                             name="l-name"
+                            minlength="3"
                             placeholder="YOUR LAST NAME"
                         />
                     </div>
@@ -59,7 +61,7 @@ <h3>Let's do this!</h3>
                     <div class="flex-label">
                         <label for="tel">PHONE NUMBER </label>
                         <input
-                            type="telephone"
+                            type="number"
                             id="tel"
                             placeholder="(213) ##-##-##-##"
                             name="phone"
@@ -70,6 +72,7 @@ <h3>Let's do this!</h3>
                         <input
                             type="password"
                             id="password"
+                            pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$"
                             name="password"
                             placeholder="password"
                             title="password don't match"
@@ -79,6 +82,7 @@ <h3>Let's do this!</h3>
                         <label for="password-con"> CONFIRM PASSWORD </label>
                         <input
                             type="password"
+                            pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$"
                             name="password-con"
                             id="password-con"
                             placeholder="confirm password"

style.css

@@ -83,14 +83,15 @@ input {
   border: 1px solid #e5e7eb;
   border-radius: 10px;
 }
-input:valid {
-  outline: none;
-  border: 1px solid #e5e7eb;
-}
+
 input:invalid {
-  outline: none;
   border: 1px solid red;
-} 
+}
+input:focus{
+  outline: none;
+  border : 1px solid #2a8eec;
+}
+
 #submit-btn {
   padding: 15 60;
   background-color: #2a8eec;
@@ -104,3 +105,8 @@ input:invalid {
 .foot_form {
   margin: 0px 3rem 2rem;
 }
+input[type=number]::-webkit-inner-spin-button, 
+input[type=number]::-webkit-outer-spin-button { 
+  -webkit-appearance: none;
+ appearance: none;
+}