feat: signup validation

app/views/signup.view.php

@@ -29,7 +29,7 @@
 </div>
 
 
-    <form hidden id="customer"   action="<?=ROOT_DIR?>/signup/customer" method="post">
+    <form  hidden id="customer"   action="<?=ROOT_DIR?>/signup/customer" method="post">
     <h2>Customer Sign Up</h2>
     <?php if(isset($errors)): ?>
         <div>  <?= implode('<br>', $errors)?>  </div>
@@ -55,6 +55,7 @@
     <input type="password" name="password" id="password" required>
 
     <input type="submit" name="submit" value="Signup">
+    <div id="error-message"></div>
     </form>
     <!-- Rental Services -->
     <form hidden id="rental-service" action="<?= ROOT_DIR ?>/signup/rentalService" method="post">
@@ -74,7 +75,7 @@
     <input type="text" name="regNo" id="registration_number">
 
     <label for="mobile_number">Mobile Number</label>
-    <input type="text" name="mobile" id="mobile_number">
+    <input type="text" name="mobile" id="number">
 
     <label for="email">Email Address</label>
     <input type="text" name="email" id="email">
@@ -87,6 +88,8 @@
     <input type="password" name="password" id="password">
 
     <input type="submit" name="submit" value="Signup">
+    <div id="error-message"></div>
+
 </form>
 
 
@@ -109,7 +112,7 @@
     <input type="text" name="nic" id="nic" required>
 
     <label for="mobile_number">Mobile Number</label>
-    <input type="text" name="mobile" id="mobile_number" required>
+    <input type="text" name="mobile" id="number" required>
 
     <label for="email">Email Address</label>
     <input type="text" name="email" id="email" required>
@@ -130,6 +133,8 @@
     <input type="password" name="password" id="password" required>
 
     <input type="submit" name="submit" value="Signup">
+    <div id="error-message"></div>
+
         </form>
 
     <p>

public/assets/css/style.css

@@ -453,7 +453,7 @@ body {
   .login-form p {
     text-align: center;
     margin-top: 10px;
-    font-size: 12px;
+    /* font-size: 12px; */
   }
 
   .login-form a {
@@ -499,6 +499,14 @@ body {
     flex-direction: column;
 }
 
+form #error-message {
+    color: red;
+    text-align: center;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    font-size: 15px;
+}
+
 /* Style for the custom file input */
 .file-input-container {
     position: relative;

public/assets/js/signup.js

@@ -29,3 +29,84 @@ fileInput.addEventListener("change", function () {
         fileLabel.textContent = "Choose Verification Document";
     }
 });
+
+
+// JavaScript code for form validation
+function validateForm(formId) {
+    var form = document.getElementById(formId);
+    // var errorDiv = document.createElement('div');
+    // errorDiv.className = 'error-message';
+    // form.appendChild(errorDiv);
+    var errorDiv = document.getElementById('error-message');
+
+    var name = form.querySelector('input[name="name"]');
+    var address = form.querySelector('input[name="address"]');
+    var email = form.querySelector('input[name="email"]');
+    var number = form.querySelector('input[id="number"]');
+    var nic = form.querySelector('input[name="nic"]');
+    var password = form.querySelector('input[name="password"]');
+    var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    var passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
+    var phoneNumberRegex = /^(\+\d{1,3})?\d{10,14}$/; // 10-14 digits with or without '+'
+    var nicRegex = /^[0-9]{9}[vVxX]$/; // 10 digits ending with 'v' or 'x'
+
+
+    // Clear previous error messages
+    errorDiv.innerHTML = '';
+
+    // Basic validation for non-empty fields
+    if (name.value === '' || address.value === '' || number.value === '' || nic.value === '' || password.value === '') {
+        errorDiv.innerHTML = 'All fields are required.';
+        console.log('All fields are required.');
+        return false;
+    }
+
+    // Email format validation
+    if (!emailRegex.test(email.value)) {
+        errorDiv.innerHTML = 'Invalid email address.';
+        console.log('Invalid email address.');
+        return false;
+    }
+
+    if (!phoneNumberRegex.test(number.value)) {
+        errorDiv.innerHTML = 'Invalid phone number. Please enter a valid phone number with or without "+".';
+        console.log('Invalid phone number. Please enter a valid phone number with or without "+".');
+        return false;
+    }
+
+    // NIC number validation
+    // if (!nicRegex.test(nic.value)) {
+    //     errorDiv.innerHTML = 'Invalid NIC number. Please enter a valid NIC number ending with "v" or "x".';
+    //     console.log('Invalid NIC number. Please enter a valid NIC number ending with "v" or "x".');
+    //     // return false;
+    // }
+
+
+    // Password strength check
+    if (!passwordRegex.test(password.value)) {
+        errorDiv.innerHTML = 'Password must be at least 8 characters long and include at least one uppercase letter, one lowercase letter, and one number.';
+        console.log('Password must be at least 8 characters long and include at least one uppercase letter, one lowercase letter, and one number.');
+        return false;
+    }
+
+    return true;
+}
+
+// Event listener for form submission
+document.getElementById('customer').onsubmit = function(event) {
+    if (!validateForm('customer')) {
+        event.preventDefault(); // Prevent form submission if validation fails
+    }
+};
+
+document.getElementById('rental-service').onsubmit = function(event) {
+    if (!validateForm('rental-service')) {
+        event.preventDefault(); // Prevent form submission if validation fails
+    }
+};
+
+document.getElementById('guide').onsubmit = function(event) {
+    if (!validateForm('guide')) {
+        event.preventDefault(); // Prevent form submission if validation fails
+    }
+};