Password spchar regex added and warning while adding password regardi…

…ng no special symobols
Anjaliavv51 · Oct 1, 2024 · ce7c6ed · ce7c6ed
1 parent 43bb258
commit ce7c6ed
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 5 deletions.
diff --git a/Html-files/scriptsignup.js b/Html-files/scriptsignup.js
@@ -34,7 +34,33 @@ document.getElementById("signup-form").addEventListener("submit", function(event
   const email = document.getElementById("email").value;
   const password = document.getElementById("password").value;
 
-  if (validateForm(name, email, password)) {
+  const nameError = document.getElementById("name-error");
+  const passwordError = document.getElementById("password-error");
+  const emailError = document.getElementById("email-error");
+
+  // Reset error messages
+  nameError.textContent = "";
+  passwordError.textContent = "";
+  emailError.textContent = "";
+
+  // Regex to prevent <, >, ", or / in the name and password
+  const spcharexp = /[<>"/]/;
+
+  let valid = true; // A flag to track validation status
+
+  // Name validation
+  if (spcharexp.test(name)) {
+      nameError.textContent = "Name cannot contain <, >, \", or /";
+      valid = false;
+  }
+
+  // Password validation
+  if (spcharexp.test(password)) {
+      passwordError.textContent = "Password cannot contain <, >, \", or /";
+      valid = false;
+  }
+
+  if (validateForm(name, email, password) && valid) {
     // Simulate a successful registration (Replace with actual Firebase sign-up logic)
     console.log("Form submitted with:", { name, email, password });
     window.location.href = "../Html-files/signed.html";

diff --git a/Html-files/signup.html b/Html-files/signup.html
@@ -125,6 +125,38 @@
     text-shadow: 0px 0px 2px rgb(90, 90, 90), 0px 0px 5px gray;
     transform: translateZ(-40px);
 }
+.error-message {
+            color: red;
+            font-size: 0.9em;
+        }
+        .textfield {
+            margin-bottom: 15px;
+        }
+        /* Tooltip styling */
+        .tooltip {
+            position: relative;
+            display: inline-block;
+        }
+        .tooltip .tooltiptext {
+            visibility: hidden;
+            width: 200px;
+            background-color: #555;
+            color: #fff;
+            text-align: center;
+            border-radius: 5px;
+            padding: 5px;
+            position: absolute;
+            z-index: 1;
+            bottom: 125%; /* Position above the input field */
+            left: 50%;
+            margin-left: -100px; /* Center the tooltip */
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        .tooltip:hover .tooltiptext {
+            visibility: visible;
+            opacity: 1;
+        }
 .area .way:nth-child(1):hover ~ .box{transform: rotateX(-20deg) rotateY(20deg);}
 .area .way:nth-child(2):hover ~ .box{transform: rotateX(-20deg) rotateY(0deg);}
 .area .way:nth-child(3):hover ~ .box{transform: rotateX(-20deg) rotateY(-20deg);}
@@ -186,15 +218,21 @@ <h1 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">SIGN U
               <div class="textfield">
                 <label for="name" style="font-family:var(--ff-philosopher);color: black;">Name</label>
                 <input type="text" id="name" name="name" placeholder="Enter your name" required style="font-family: var(--ff-philosopher);">
+                <span id="name-error" class="error-message"></span>
               </div>
               <div class="textfield">
                 <label for="email" style="font-family: var(--ff-philosopher);color: black;">Email / User Name</label>
                 <input type="email" id="email" name="email" placeholder="Enter Email / UserName" required style="font-family: var(--ff-philosopher);">
+                <span id="email-error" class="error-message"></span>
               </div>
-              <div class="textfield">
-                <label for="password" style="font-family:var(--ff-philosopher);color: black;">Password</label>
-                <input type="password" id="password" name="password" placeholder="Enter Password" required style="font-family: var(--ff-philosopher);">
-              </div>
+
+              <div class="textfield tooltip">
+                <label for="password">Password</label>
+                <input type="password" id="password" name="password" placeholder="Enter Password" title="Special characters are not allowed" required>
+                <span id="password-error" class="error-message"></span>
+                <span class="tooltiptext">Special characters such as /[<>"/]/  are not allowed</span>
+            </div>
+
               <button type="submit" class="btn-login" style="font-family: var(--ff-philosopher);color: #ddd;">Register</button>
             </form>
             <button id="google-login" style="font-family: var(--ff-philosopher);color: #ddd;">Signup with Google</button>