Update signup.html

added password constraints
Anjaliavv51 · Oct 27, 2024 · fd9d0e9 · fd9d0e9
1 parent d393add
commit fd9d0e9
Showing 1 changed file with 38 additions and 9 deletions.
diff --git a/Html-files/signup.html b/Html-files/signup.html
@@ -346,18 +346,47 @@ <h1 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">SIGN U
         defer>
         </script>
         <script>
-          // JavaScript to toggle password visibility
-          const passwordField = document.getElementById('password');
-          const showPasswordCheckbox = document.getElementById('showPassword');
-
-          showPasswordCheckbox.addEventListener('change', () => {
+            // JavaScript to toggle password visibility
+            const passwordField = document.getElementById('password');
+            const showPasswordCheckbox = document.getElementById('showPassword');
+            const passwordMessage = document.getElementById('passwordMessage');
+
+            showPasswordCheckbox.addEventListener('change', () => {
               if (showPasswordCheckbox.checked) {
-                  passwordField.type = 'text';  // Show password
+                passwordField.type = 'text';  // Show password
               } else {
-                  passwordField.type = 'password';  // Hide password
+                passwordField.type = 'password';  // Hide password
               }
-          });
-      </script>
+            });
+
+            // Function to validate password constraints
+            function validatePassword() {
+              const password = passwordField.value;
+              const minLength = 8;
+              const hasNumber = /\d/;
+              const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/;
+
+              let message = '';
+
+              if (password.length < minLength) {
+                message += `Password must be at least ${minLength} characters long. `;
+              }
+              if (!hasNumber.test(password)) {
+                message += 'Password must contain at least one number. ';
+              }
+              if (!hasSpecialChar.test(password)) {
+                message += 'Password must contain at least one special character. ';
+              }
+
+              passwordMessage.textContent = message;
+            }
+
+            // Add event listener to password field
+            passwordField.addEventListener('input', validatePassword);
+          </script>
+
+          <!-- Add this element to display password validation messages -->
+          <div id="passwordMessage" style="color: red;"></div>
     <div class="gtranslate_wrapper"></div>
     <script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
     <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>