diff --git a/public/js/validation.js b/public/js/validation.js new file mode 100644 index 0000000..6a0aafe --- /dev/null +++ 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'); + } + }); + + + })() \ No newline at end of file diff --git a/views/NGO-Registration.ejs b/views/NGO-Registration.ejs index 3567b09..daa24d3 100644 --- a/views/NGO-Registration.ejs +++ b/views/NGO-Registration.ejs @@ -97,31 +97,51 @@
NGO Registration Form

-
+
- - + + +
+ Name field looks good! +
+
+ Name should be at least 4 characters long! +
- - + + +
Email field looks good!
+
Please enter a valid email address (e.g., user@example.com).
+
- - + + +
Password field looks good!
+
Password must be at least 8 characters long and include an uppercase letter, a lowercase letter, a digit, and a special symbol.
+
- - + + +
Mobile number looks good!
+
Mobile number should be exactly 10 digits long.
+
- - + + +
NGO ID looks good!
+
NGO ID should be at least 4 characters long!
+
- - + + +
NGO location looks good!
+
Please enter a valid location (e.g., New York, NY).
@@ -155,6 +175,7 @@ + diff --git a/views/Ngo_login.ejs b/views/Ngo_login.ejs index fd343f9..0dd3eab 100644 --- a/views/Ngo_login.ejs +++ b/views/Ngo_login.ejs @@ -45,12 +45,16 @@

We are happy to have you back.

- +
- + +
Email field looks good!
+
Please enter a valid email address (e.g., user@example.com).
+
Password field looks good!
+
Password is required
@@ -103,5 +107,7 @@ }); + + \ No newline at end of file diff --git a/views/User_singUp.ejs b/views/User_singUp.ejs index e6aaeba..add043d 100644 --- a/views/User_singUp.ejs +++ b/views/User_singUp.ejs @@ -98,29 +98,47 @@ body {
User Signup Form

- +
- - + + +
+ Name field looks good! +
+
+ Name should be at least 4 characters long! +
- - + + +
Email field looks good!
+
Please enter a valid email address (e.g., user@example.com).
- - + + +
Password field looks good!
+
Password must be at least 8 characters long and include an uppercase letter, a lowercase letter, a digit, and a special symbol.
- - - - +
+ + +
Mobile number looks good!
+
Mobile number should be exactly 10 digits long.
+
+
+ + +
NGO location looks good!
+
Please enter a valid location (e.g., New York, NY).
+
- +
@@ -173,5 +191,7 @@ body { + + diff --git a/views/admin_login.ejs b/views/admin_login.ejs index 8093e38..59a0805 100644 --- a/views/admin_login.ejs +++ b/views/admin_login.ejs @@ -43,12 +43,16 @@

We are happy to have you back.

- +
- + +
Email field looks good!
+
Please enter a valid email address (e.g., user@example.com).
+
Password field looks good!
+
Password is required
@@ -102,5 +106,6 @@ }); + \ No newline at end of file diff --git a/views/loginError.ejs b/views/loginError.ejs index c2f9e2b..256ed16 100644 --- a/views/loginError.ejs +++ b/views/loginError.ejs @@ -17,4 +17,4 @@

Go back to login

- + \ No newline at end of file diff --git a/views/user_login.ejs b/views/user_login.ejs index c3970b9..d4e5c88 100644 --- a/views/user_login.ejs +++ b/views/user_login.ejs @@ -44,12 +44,16 @@

Hello,Again

We are happy to have you back.

- +
- + +
Email field looks good!
+
Please enter a valid email address (e.g., user@example.com).
+
Password field looks good!
+
Password is required
@@ -110,6 +114,9 @@ + + + \ No newline at end of file