From 115b95675fbdbc5b27247f01b44d254b52edf644 Mon Sep 17 00:00:00 2001
From: tighei <oussama.adame12@gmail.com>
Date: Fri, 1 Mar 2024 19:25:24 +0100
Subject: [PATCH] Refactor form validation and add email validation

---
 .vscode/launch.json | 11 -----------
 MAIN.js             | 24 ++++++++++++++++++++++--
 index.html          |  8 ++++++--
 style.css           | 18 ++++++++++++------
 4 files changed, 40 insertions(+), 21 deletions(-)
 delete mode 100644 .vscode/launch.json

diff --git a/.vscode/launch.json b/.vscode/launch.json
deleted file mode 100644
index bed780b..0000000
--- a/.vscode/launch.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        
-        
-
-    ]
-}
\ No newline at end of file
diff --git a/MAIN.js b/MAIN.js
index 2d90c66..c45c3e4 100644
--- a/MAIN.js
+++ b/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();
diff --git a/index.html b/index.html
index c6607dd..ff71467 100644
--- a/index.html
+++ b/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"
diff --git a/style.css b/style.css
index f46acdc..06751b0 100644
--- a/style.css
+++ b/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;
+}
\ No newline at end of file