Merge pull request #148 from Samani-Humaira/password-strength/formVal…

…idation password strength with form validation
Sahil1786 · Jun 3, 2024 · 95281fc · 95281fc
2 parents a94fc2d + b03b071
commit 95281fc
Show file tree

Hide file tree

Showing 7 changed files with 181 additions and 32 deletions.
diff --git a/public/js/validation.js b/public/js/validation.js
@@ -0,0 +1,90 @@
+// Example starter JavaScript for disabling form submissions if there are invalid fields
+(() => {
+    'use strict'
+
+    // Fetch all the forms we want to apply custom Bootstrap validation styles to
+    const forms = document.querySelectorAll('.needs-validation')
+
+    // Loop over them and prevent submission
+    Array.from(forms).forEach(form => {
+      form.addEventListener('submit', event => {
+        if (!form.checkValidity()) {
+          event.preventDefault()
+          event.stopPropagation()
+        }
+
+        form.classList.add('was-validated')
+      }, false)
+    });
+
+    // Password validation script
+    var passwordInput = document.getElementById('password');
+
+    passwordInput.addEventListener('input', function () {
+        var passwordValue = passwordInput.value;
+        var passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,}$/;
+
+        if (passwordPattern.test(passwordValue)) {
+            passwordInput.setCustomValidity('');
+        } else {
+            passwordInput.setCustomValidity('Invalid');
+        }
+    });
+
+    // Name validation script
+    var nameInput = document.getElementById('name');
+
+    nameInput.addEventListener('input', function () {
+        var nameValue = nameInput.value;
+        if (nameValue.length >= 4) {
+            nameInput.setCustomValidity('');
+        } else {
+            nameInput.setCustomValidity('Invalid');
+        }
+    });
+
+    // Email validation script
+    var emailInput = document.getElementById('email');
+
+    emailInput.addEventListener('input', function () {
+        var emailValue = emailInput.value;
+        // Regex pattern to validate email
+        var emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+
+        if (emailPattern.test(emailValue)) {
+            emailInput.setCustomValidity('');
+        } else {
+            emailInput.setCustomValidity('Invalid');
+        }
+       });
+
+    // Mobile number validation script
+    var mobileInput = document.getElementById('mobn');
+    // var mobileFeedback = document.getElementById('mobileFeedback');
+
+    mobileInput.addEventListener('input', function () {
+        var mobileValue = mobileInput.value;
+        // Regex pattern to validate mobile number
+        var mobilePattern = /^\d{3}\d{3}\d{4}$/;
+
+        if (mobilePattern.test(mobileValue)) {
+            mobileInput.setCustomValidity('');
+        } else {
+            mobileInput.setCustomValidity('Invalid');
+        }
+    });
+
+    // NGO ID validation script
+    var NGOIDInput = document.getElementById('ngoid');
+
+    NGOIDInput.addEventListener('input', function () {
+        var nameValue = NGOIDInput.value;
+        if (nameValue.length >= 4) {
+            NGOIDInput.setCustomValidity('');
+        } else {
+            NGOIDInput.setCustomValidity('Invalid');
+        }
+    });
+
+
+  })()
diff --git a/views/NGO-Registration.ejs b/views/NGO-Registration.ejs
@@ -97,31 +97,51 @@
     <header class="header">NGO Registration Form</header>
     <br>
     <hr>
-    <form action="/NGO-Registarion" class="form custom-box" method="POST">
+    <form action="/NGO-Registarion" class="form custom-box needs-validation" method="POST" novalidate >
         <div class="input-box">
-            <label>NGO Name</label>
-            <input type="text" name="NgoName" placeholder="Enter NGO name" required />
+            <label class="form-label">NGO Name</label>
+            <input id="name" class="form-control" type="text" name="NgoName" placeholder="Enter NGO name" required />
+            <div class="valid-feedback">
+                Name field looks good!
+            </div>
+            <div id="nameFeedback" class="invalid-feedback">
+                Name should be at least 4 characters long!
+            </div>
         </div>
 
         <div class="input-box">
-            <label>Email Address</label>
-            <input type="text" name="username" placeholder="Enter email address" required />
+            <label class="form-label">Email Address</label>
+            <input id="email" class="form-control" type="email" name="username" placeholder="Enter email address" required />
+            <div class="valid-feedback">Email field looks good!</div>
+            <div id="emailFeedback" class="invalid-feedback">Please enter a valid email address (e.g., user@example.com).</div>
         </div>
+
         <div class="input-box">
-            <label>Password</label>
-            <input type="password" name="password" placeholder="Enter password" required />
+            <label class="form-label">Password</label>
+            <input id="password" class="form-control" type="password" name="password" placeholder="Enter password" required />
+            <div class="valid-feedback">Password field looks good!</div>
+            <div class="invalid-feedback" id="passwordFeedback">Password must be at least 8 characters long and include an uppercase letter, a lowercase letter, a digit, and a special symbol.</div>
         </div>
+
         <div class="input-box">
-            <label>Mobile Number</label>
-            <input type="number" name="Mobile" placeholder="Enter mobile number" required />
+            <label class="form-label">Mobile Number</label>
+            <input id="mobn" class="form-control" type="text" name="Mobile" placeholder="Enter mobile number" required />
+            <div class="valid-feedback">Mobile number looks good!</div>
+            <div id="mobnFeedback" class="invalid-feedback">Mobile number should be exactly 10 digits long.</div>
         </div>
+
         <div class="input-box">
-            <label>NGO ID</label>
-            <input type="text" name="NgoID" placeholder="Enter NGO ID" required />
+            <label class="form-label">NGO ID</label>
+            <input id="ngoid" class="form-control" type="text" name="NgoID" placeholder="Enter NGO ID" required />
+            <div class="valid-feedback">NGO ID looks good!</div>
+            <div id="ngoidFeedback" class="invalid-feedback">NGO ID should be at least 4 characters long!</div>
         </div>
+
         <div class="input-box">
-            <label>NGO Location</label>
-            <input type="text" name="NgoLocation" placeholder="Enter NGO location" required />
+            <label class="form-label">NGO Location</label>
+            <input id="ngoloc" class="form-control" type="text" name="NgoLocation" placeholder="Enter NGO location" required />
+            <div class="valid-feedback">NGO location looks good!</div>
+            <div id="ngolocFeedback" class="invalid-feedback">Please enter a valid location (e.g., New York, NY).</div>
         </div>
 
         <button type="submit" id="signup-btn">Submit</button>
@@ -155,6 +175,7 @@
 </script>
 
 <script src="js/index.js"></script>
+<script src="js/validation.js"></script>
 
 </body>
 </html>
diff --git a/views/Ngo_login.ejs b/views/Ngo_login.ejs
@@ -45,12 +45,16 @@
                      <p>We are happy to have you back.</p>
 
                 </div>
-                <form action="/Ngo-login" method="POST">
+                <form action="/Ngo-login" method="POST" novalidate class="needs-validation">
                     <div class="input-group mb-3">
-                        <input type="text"  name="username" class="form-control form-control-lg bg-light fs-6" placeholder="Email address" required>
+                        <input id="email" type="email"  name="username" class="form-control form-control-lg bg-light fs-6" placeholder="Email address" required>
+                        <div class="valid-feedback">Email field looks good!</div>
+                        <div class="invalid-feedback">Please enter a valid email address (e.g., user@example.com).</div>
                     </div>
                     <div class="input-group mb-1">
                         <input type="password" name="password" class="form-control form-control-lg bg-light fs-6" placeholder="Password" required>
+                        <div class="valid-feedback">Password field looks good!</div>
+                        <div class="invalid-feedback">Password is required</div>
                     </div>
                     <div class="input-group mb-5 d-flex justify-content-between">
                         <div class="form-check">
@@ -103,5 +107,7 @@
     });
 
     </script>
+
+<script src="js/validation.js"></script>
 </body>
 </html>
diff --git a/views/User_singUp.ejs b/views/User_singUp.ejs
@@ -98,29 +98,47 @@ body {
     <header class="header">User Signup Form</header>
     <br>
     <hr>
-    <form action="/User_singUp" class="form custom-box" method="POST">
+    <form action="/User_singUp" class="form custom-box needs-validation" method="POST" novalidate >
         <div class="input-box">
-            <label>Full Name</label>
-            <input type="text" name="fname" placeholder="Enter full name" required />
+            <label class="form-label">Full Name</label>
+            <input id="name" class="form-control" type="text" name="fname" placeholder="Enter full name" required />
+            <div class="valid-feedback">
+                Name field looks good!
+            </div>
+            <div id="nameFeedback" class="invalid-feedback">
+                Name should be at least 4 characters long!
+            </div>
         </div>
 
         <div class="input-box">
-            <label>Email Address</label>
-            <input type="text" name="username" placeholder="Enter email address" required />
+            <label class="form-label">Email Address</label>
+            <input id="email" class="form-control" type="email" name="username" placeholder="Enter email address" required />
+            <div class="valid-feedback">Email field looks good!</div>
+            <div id="emailFeedback" class="invalid-feedback">Please enter a valid email address (e.g., user@example.com).</div>
         </div>
         <div class="input-box">
-            <label>Password</label>
-            <input type="password" name="password" placeholder="Enter password" required />
+            <label class="form-label">Password</label>
+            <input id="password" class="form-control" type="password" name="password" placeholder="Enter password" required />
+            <div class="valid-feedback">Password field looks good!</div>
+            <div class="invalid-feedback" id="passwordFeedback">Password must be at least 8 characters long and include an uppercase letter, a lowercase letter, a digit, and a special symbol.</div>
         </div>
         <div class="input-box">
-            <label>Phone Number</label>
-            <input type="number" name="phn" placeholder="Enter phone number" required />
-            <label>Address</label>
-            <input type="text" name="address" placeholder="Enter address" required />
+            <div>
+                <label class="form-label">Phone Number</label>
+                <input id="mobn" class="form-control" type="number" name="phn" placeholder="Enter phone number" required />
+                <div class="valid-feedback">Mobile number looks good!</div>
+                <div id="mobnFeedback" class="invalid-feedback">Mobile number should be exactly 10 digits long.</div>
+            </div>
+            <div>
+                <label class="form-label">Address</label>
+                <input class="form-control" type="text" name="address" placeholder="Enter address" required />
+                <div class="valid-feedback">NGO location looks good!</div>
+                <div id="ngolocFeedback" class="invalid-feedback">Please enter a valid location (e.g., New York, NY).</div>
+            </div>
         </div>
         <div class="column">
             <div class="input-box">
-                <label>Birth Date</label>
+                <label >Birth Date</label>
                 <input type="date" name="dob" placeholder="Enter birth date" required />
             </div>
         </div>
@@ -173,5 +191,7 @@ body {
 
 </script>
 <script src="js/index.js"></script>
+<script src="js/validation.js"></script>
+
 </body>
 </html>
diff --git a/views/admin_login.ejs b/views/admin_login.ejs
@@ -43,12 +43,16 @@
                      <p>We are happy to have you back.</p>
 
                 </div>
-                <form action="/admin-login" method="POST">
+                <form action="/admin-login" method="POST" novalidate class="needs-validation">
                     <div class="input-group mb-3">
-                        <input type="text"  name="email" class="form-control form-control-lg bg-light fs-6" placeholder="Email address" required>
+                        <input id="email"  type="email"  name="email" class="form-control form-control-lg bg-light fs-6" placeholder="Email address" required>
+                        <div class="valid-feedback">Email field looks good!</div>
+                        <div class="invalid-feedback">Please enter a valid email address (e.g., user@example.com).</div>
                     </div>
                     <div class="input-group mb-1">
                         <input type="password" name="password" class="form-control form-control-lg bg-light fs-6" placeholder="Password" required>
+                        <div class="valid-feedback">Password field looks good!</div>
+                        <div class="invalid-feedback">Password is required</div>
                     </div>
                     <div class="input-group mb-5 d-flex justify-content-between">
                         <div class="form-check">
@@ -102,5 +106,6 @@
     });
 
     </script>
+<script src="js/validation.js"></script>
 </body>
 </html>
diff --git a/views/loginError.ejs b/views/loginError.ejs
@@ -17,4 +17,4 @@
     <p><a href="/user_login">Go back to login</a></p>
 </body>
 
-</html>
+</html>
diff --git a/views/user_login.ejs b/views/user_login.ejs
@@ -44,12 +44,16 @@
                      <h2>Hello,Again</h2>
                      <p>We are happy to have you back.</p>
                 </div>
-                <form action="/login" method="POST">
+                <form action="/login" method="POST" novalidate class="needs-validation">
                 <div class="input-group mb-3">
-                    <input type="text" name="username"class="form-control form-control-lg bg-light fs-6" placeholder="Email address" required>
+                    <input id="email" type="email" name="username"class="form-control form-control-lg bg-light fs-6" placeholder="Email address" required>
+                    <div class="valid-feedback">Email field looks good!</div>
+                        <div class="invalid-feedback">Please enter a valid email address (e.g., user@example.com).</div>
                 </div>
                 <div class="input-group mb-1">
                     <input type="password" name="password" class="form-control form-control-lg bg-light fs-6" placeholder="Password" required>
+                    <div class="valid-feedback">Password field looks good!</div>
+                    <div class="invalid-feedback">Password is required</div>
 
                 </div>
                 <div class="input-group mb-5 d-flex justify-content-between">
@@ -110,6 +114,9 @@
     </script>
 
     <script src="js/index.js"></script>
+
+
+<script src="js/validation.js"></script>
 
 </body>
 </html>