Merge pull request 'Basic structure html and form navigation' (#1) from dev into main

Reviewed-on: #1

index.html

@@ -21,8 +21,6 @@
             name="full_name"
             id="full_name"
             required
-            minlength="3"
-            pattern="^[A-Za-z]+(?: [A-Za-z]+)*$"
             class="rounded p-1"
           />
           <label for="email" class="text-lg">Email</label>

script.js

@@ -1,63 +1,176 @@
 const forms = document.querySelectorAll("[data-form]");
-var currentStep = 0;
+let currentStep = 0;
-var currentForm = forms[currentStep];
+let currentForm = forms[currentStep];
+let data = {};
 
-var data = {};
+function checkValidity() {
+  clearErrors();
+  let isValid = true;
 
-function incrementStep() {
+  if (currentStep === 0) {
+    // Full Name Validation
+    const fullName = document.getElementById("full_name");
+    if (!fullName.value.trim()) {
+      showError(fullName, "Full name is required");
+      isValid = false;
+    } else if (!fullName.value.match(/^[A-Za-z]+(?: [A-Za-z]+)*$/)) {
+      showError(fullName, "Name should only contain letters and spaces");
+      isValid = false;
+    } else if (fullName.value.length < 3) {
+      showError(fullName, "Name should be at least 3 characters long");
+      isValid = false;
+    }
 
-  // Check if current form is filled
+    // Email Validation
-  let inputs = currentForm.getElementsByTagName("input");
+    const email = document.getElementById("email");
-  for (const input of inputs) {
+    if (!email.value.trim()) {
-    if (!input.checkValidity()) {
+      showError(email, "Email is required");
-      input.reportValidity();
+      isValid = false;
-      return;
+    } else if (!email.value.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
+      showError(email, "Please enter a valid email address");
+      isValid = false;
+    }
+
+    // Phone Validation
+    const phone = document.getElementById("phone");
+    if (!phone.value.trim()) {
+      showError(phone, "Phone number is required");
+      isValid = false;
+    } else if (!phone.value.match(/^[0-9]{10}$/)) {
+      showError(phone, "Phone number must be exactly 10 digits");
+      isValid = false;
+    }
+
+    // Gender Validation
+    const gender = document.querySelector('input[name="gender"]:checked');
+    if (!gender) {
+      showError(document.querySelector('input[name="gender"]').parentElement, "Please select your gender");
+      isValid = false;
+    }
+
+    // Age Validation
+    const age = document.getElementById("age");
+    if (!age.value) {
+      showError(age, "Age is required");
+      isValid = false;
+    } else if (age.value < 18) {
+      showError(age, "You must be at least 18 years old");
+      isValid = false;
+    } else if (age.value > 100) {
+      showError(age, "Age cannot be more than 100 years");
+      isValid = false;
     }
   }
 
-  try {
+  if (currentStep === 1) {
-    let skills = [];
+    // Education Validation
+    const education = document.getElementById("education");
+    if (education.value === "none") {
+      showError(education, "Please select your education level");
+      isValid = false;
+    }
 
-    data["fullName"] = document.getElementById("full_name").value;
+    // Skills Validation
-    document.getElementById("full-name-review").innerText = data["fullName"];
+    const skills = document.querySelectorAll('input[name="skills"]:checked');
+    if (skills.length === 0) {
+      showError(document.querySelector('input[name="skills"]').parentElement, "Please select at least one skill");
+      isValid = false;
+    }
 
-    data["email"] = document.getElementById("email").value;
+    // Experience Validation
-    document.getElementById("email-review").innerText = data["email"];
+    const experience = document.getElementById("experience");
+    if (!experience.value) {
+      showError(experience, "Experience is required");
+      isValid = false;
+    } else if (experience.value < 0) {
+      showError(experience, "Experience cannot be negative");
+      isValid = false;
+    } else if (experience.value > 50) {
+      showError(experience, "Experience cannot be more than 50 years");
+      isValid = false;
+    }
 
-    data["phone"] = document.getElementById("phone").value;
+    // Current Role Validation
-    document.getElementById("phone-review").innerText = data["phone"];
+    const currentRole = document.getElementById("current-role");
-
+    if (!currentRole.value.trim()) {
-    data["gender"] = document.querySelector(
+      showError(currentRole, "Current role is required");
-      'input[name="gender"]:checked'
+      isValid = false;
-    ).value;
+    } else if (!currentRole.value.match(/^[A-Za-z]+(?: [A-Za-z]+)*$/)) {
-    document.getElementById("gender-review").innerText = data["gender"];
+      showError(currentRole, "Current role should contain only letters and spaces");
-
+      isValid = false;
-    data["age"] = document.getElementById("age").value;
+    }
-    document.getElementById("age-review").innerText = data["age"];
-
-    data["education"] = document.getElementById("education").value;
-    document.getElementById("education-review").innerText = data["education"];
-
-    data["skills"] = document.querySelectorAll('input[name="skills"]:checked');
-    // Iterating over the NodeList and extracting the id to store it in skills array
-    data["skills"].forEach((skill) => {
-      skills.push(skill.getAttribute("id"));
-    });
-    data["skills"] = skills;
-    // To clear previous innerText rendered
-    document.getElementById("skills-review").innerText = "";
-    document.getElementById("skills-review").innerText = data["skills"];
-
-    data["experience"] = document.getElementById("experience").value;
-    document.getElementById("experience-review").innerText = data["experience"];
-
-    data["currentRole"] = document.getElementById("current-role").value;
-    document.getElementById("role-review").innerText = data["currentRole"];
-  } catch (error) {
-    // Do nothing
   }
 
-  //  Changing the visiblity of the form
+  return isValid;
+}
+
+function showError(element, message) {
+  // Create error container
+  const errorContainer = document.createElement("div");
+  errorContainer.classList.add("error", "text-red-500", "text-sm", "mt-1");
+  errorContainer.innerText = message;
+
+  if (element.type === "radio" || element.type === "checkbox") {
+    const container = element.closest("div");
+    const lastLabel = container.querySelector("label:last-of-type");
+    if (lastLabel.nextSibling) {
+      container.insertBefore(errorContainer, lastLabel.nextSibling);
+    } else {
+      container.appendChild(errorContainer);
+    }
+  } else {
+    if (element.nextSibling) {
+      element.parentNode.insertBefore(errorContainer, element.nextSibling);
+    } else {
+      element.parentNode.appendChild(errorContainer);
+    }
+  }
+
+  if (element.tagName === "INPUT" || element.tagName === "SELECT") {
+    element.classList.add("border-red-500");
+  }
+}
+
+function clearErrors() {
+  document.querySelectorAll(".error").forEach(error => error.remove());
+  
+  document.querySelectorAll("input, select").forEach(element => {
+    element.classList.remove("border-red-500");
+  });
+}
+
+function updateReviewData() {
+  try {
+    data.fullName = document.getElementById("full_name").value;
+    data.email = document.getElementById("email").value;
+    data.phone = document.getElementById("phone").value;
+    data.gender = document.querySelector('input[name="gender"]:checked')?.value || '';
+    data.age = document.getElementById("age").value;
+    data.education = document.getElementById("education").value;
+    data.skills = Array.from(document.querySelectorAll('input[name="skills"]:checked'))
+      .map(skill => skill.id);
+    data.experience = document.getElementById("experience").value;
+    data.currentRole = document.getElementById("current-role").value;
+
+    // Update review section
+    document.getElementById("full-name-review").innerText = data.fullName;
+    document.getElementById("email-review").innerText = data.email;
+    document.getElementById("phone-review").innerText = data.phone;
+    document.getElementById("gender-review").innerText = data.gender;
+    document.getElementById("age-review").innerText = data.age;
+    document.getElementById("education-review").innerText = data.education;
+    document.getElementById("skills-review").innerText = data.skills.join(", ");
+    document.getElementById("experience-review").innerText = data.experience;
+    document.getElementById("role-review").innerText = data.currentRole;
+  } catch (error) {
+    console.error("Error updating review data:", error);
+  }
+}
+
+function incrementStep() {
+  if (!checkValidity()) return;
+  
+  updateReviewData();
   currentForm.classList.remove("active");
   currentStep = Math.min(currentStep + 1, forms.length - 1);
   currentForm = forms[currentStep];
@@ -65,20 +178,19 @@ function incrementStep() {
 }
 
 function decrementStep() {
-  //  Changing the visiblity of the form
-
   currentForm.classList.remove("active");
-  currentStep = Math.max(currentStep - 1, 0);;
+  currentStep = Math.max(currentStep - 1, 0);
   currentForm = forms[currentStep];
   currentForm.classList.add("active");
 }
-document
-  .querySelector('button[type="submit"]')
-  .addEventListener("click", function (event) {
-    event.preventDefault();
 
-    window.localStorage.clear();
+// Form submission handler
-    window.localStorage.setItem("formData", JSON.stringify(data));
+document.querySelector('button[type="submit"]').addEventListener("click", function(event) {
-    window.alert("Form submitted successfully");
+  event.preventDefault();
-    window.location.href = "/";
+  
-  });
+  window.localStorage.clear();
+  window.localStorage.setItem("formData", JSON.stringify(data));
+  
+  window.alert("Form submitted successfully!");
+  window.location.href = "/";
+});