Adding forgotpassword.js

AnthonyDeSantiago · Sep 24, 2023 · b714d57 · b714d57
1 parent 2192d92
commit b714d57
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 6 deletions.
diff --git a/public/forgotpassword.js b/public/forgotpassword.js
@@ -0,0 +1,51 @@
+console.log("forgotpassword.js has loaded!!!");
+
+function showError(input, message) {
+    const formControl = input.parentElement;
+    formControl.className = "form-control error";
+    const small = formControl.querySelector('small');
+    small.innerText = message
+}
+
+
+// function validateEmail(email) {
+//     var emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+//     return emailPattern.test(email);
+// }
+
+// function validateUserName(username) {
+
+// }
+
+
+document.getElementById("password_form").addEventListener("submit", async function (e) {
+    e.preventDefault();
+    console.log("button is pressed");
+
+    const userEmailElement = document.getElementById("user_email");
+    const userNameElement = document.getElementById("username");
+
+    var userEmail = userEmailElement.value;
+    var username = userNameElement.value;
+
+    var isValid = true;
+
+    if (userEmail == '') {
+        var errorMessage = "Please enter an email address.";
+        showError(userEmailElement, errorMessage);
+        isValid = false;
+    }
+
+    if (username == '') {
+        var errorMessage = "Please enter a username.";
+        showError(userNameElement, errorMessage);
+        isValid = false;
+    }
+
+
+    if (!isValid) {
+        return false;
+    }
+
+
+});
diff --git a/public/password_page_1.html b/public/password_page_1.html
@@ -5,7 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <link rel="stylesheet" href="style.css" class="rel">
-    <script defer src = "sprout.js"></script>
+    <!-- <script defer src = "sprout.js"></script> -->
+    <script defer src="forgotpassword.js"></script>
 </head>
 <body>
 
@@ -21,13 +22,13 @@
             <form id="password_form">
                 <div class="form-control">
                     <label for="email">Email</label>
-                    <input type="email" name="user_email" class="forgot_password_form" placeholder="Email">
+                    <input type="email" name="user_email" class="forgot_password_form" id="user_email" placeholder="Email">
                     <small>Error Message</small>
                 </div>
 
                 <div class="form-control">
                     <label for="user_id">Username</label>
-                    <input type="user_id" name="user_id" class="forgot_password_form" placeholder="Username">
+                    <input type="user_id" name="user_id" class="forgot_password_form" id="username" placeholder="Username">
                     <small>Error Message</small>
                 </div>
 
@@ -79,9 +80,7 @@
             </form>        
 
             <!-- button -->
-            <a href="index.html">
-
-            </a>
+
 
         </main>