Update Demo_Password_Change.html

2024-01-20 21:15:35 +01:00
parent 02f85f745e
commit edd003cabe
1 changed files with 24 additions and 1 deletions
@@ -49,12 +49,18 @@
        button:hover {
            background-color: #0056b3;
        }
+        .success {
+            color: #009900;
+        }
+        .error {
+            color: #ff0000;
+        }
    </style>
 </head>
 <body>
    <div class="container">
        <h1>Change Password</h1>
-        <form>
+        <form onsubmit="return validateForm()">
            <label for="newPassword">New Password</label>
            <input type="password" id="newPassword" name="newPassword" required>
            <br>
@@ -62,7 +68,24 @@
            <input type="password" id="confirmPassword" name="confirmPassword" required>
            <br>
            <button type="submit">Change Password</button>
+            <div id="message"></div>
        </form>
    </div>
+
+    <script>
+        function validateForm() {
+            var newPassword = document.getElementById("newPassword").value;
+            var confirmPassword = document.getElementById("confirmPassword").value;
+            var messageDiv = document.getElementById("message");
+
+            if (newPassword === confirmPassword) {
+                messageDiv.innerHTML = "<p class='success'>Password changed successfully!</p>";
+                return true;
+            } else {
+                messageDiv.innerHTML = "<p class='error'>Passwords do not match. Please try again.</p>";
+                return false;
+            }
+        }
+    </script>
 </body>
 </html>