password strength with form validation

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');
+ }
+ });
+
+
+ })()

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>

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>

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>

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>

views/loginError.ejs

@@ -16,4 +16,4 @@
  <p><a href="/user_login">Go back to login</a></p>
 </body>
 
-</html>
+</html>

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>