Merge pull request #73 from Anuragpal010104/CartAlert

Added form validation on signup page
Karamraj · Oct 3, 2023 · 7713486 · 7713486
2 parents 3d364e4 + 56d8d57
commit 7713486
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git a/SignUpModal/index.html b/SignUpModal/index.html
@@ -18,10 +18,21 @@
       <div class="row d-flex align-items-center justify-content-center h-100">
         <div class="col-md-8 col-lg-7 col-xl-6">
           <img src="../IMG/deafults/sign_up.jpg" class="img-fluid vert-move" alt="Phone image">
+
         </div>
         <div class="col-md-7 col-lg-5 col-xl-5 offset-xl-1">
           <h2 class="text-center text-danger">Sign Up</h2>
           <form>
+            <div class="col-md-4">
+          <label for="validationCustom04" class="form-label">Email or Phone Number</label>
+          <input
+            type="text"
+            class="form-control"
+            id="validationCustom04"
+            required
+          />
+          <div class="invalid-feedback">Please provide a valid email or phone number.</div>
+        </div>
             <!-- First Name input -->
             <div class="form-outline mb-3">
               <label class="form-label" for="form1Example13">First Name</label>

diff --git a/SignUpModal/script.js b/SignUpModal/script.js
@@ -5,7 +5,9 @@
     form.addEventListener(
       "submit",
       (event) => {
-        if (!form.checkValidity()) {
+        const emailOrPhoneInput = form.querySelector("#validationCustom04");
+        const emailOrPhoneValue = emailOrPhoneInput.value.trim();
+        if (!form.checkValidity() || !isEmailOrPhoneUnique(emailOrPhoneValue)) {
           event.preventDefault();
           event.stopPropagation();
         }
@@ -14,6 +16,20 @@
       false
     );
   });
+   // Function to check if email or phone number is unique
+   function isEmailOrPhoneUnique(value) {
+    // Retrieve previously stored user data from localStorage
+    const storedUserData = JSON.parse(localStorage.getItem("userData"));
+
+    if (storedUserData && storedUserData.emailOrPhone === value) {
+      // Not unique - show error message
+      const emailOrPhoneInput = document.querySelector("#validationCustom04");
+      emailOrPhoneInput.classList.add("is-invalid");
+      return false;
+    }
+
+    return true;
+  }
 })();
 
 // onsubmit section
@@ -23,6 +39,8 @@ const form = document.querySelector(".needs-validation");
 
 submitBtn.addEventListener("click", (event) => {
   userData = {
+    emailOrPhone:
+    event.target.parentElement.parentElement.children[6].children[1].value,
     firtsName:
       event.target.parentElement.parentElement.children[0].children[1].value,
       lastName: