From d3e667eedfef63d667e6440bbe062771f7d6ea55 Mon Sep 17 00:00:00 2001 From: rishav_dml Date: Fri, 27 Dec 2024 11:31:44 +0530 Subject: [PATCH] Task completed --- index.html | 2 - script.js | 232 +++++++++++++++++++++++++++++++++++++++-------------- 2 files changed, 172 insertions(+), 62 deletions(-) diff --git a/index.html b/index.html index 654cdf8..6d44956 100644 --- a/index.html +++ b/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" /> diff --git a/script.js b/script.js index b7480fe..a3d032e 100644 --- a/script.js +++ b/script.js @@ -1,63 +1,176 @@ const forms = document.querySelectorAll("[data-form]"); -var currentStep = 0; -var currentForm = forms[currentStep]; +let currentStep = 0; +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 - let inputs = currentForm.getElementsByTagName("input"); - for (const input of inputs) { - if (!input.checkValidity()) { - input.reportValidity(); - return; + // Email Validation + const email = document.getElementById("email"); + if (!email.value.trim()) { + showError(email, "Email is required"); + isValid = false; + } 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 { - let skills = []; + if (currentStep === 1) { + // 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; - document.getElementById("full-name-review").innerText = data["fullName"]; + // Skills Validation + 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; - document.getElementById("email-review").innerText = data["email"]; + // Experience Validation + 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; - document.getElementById("phone-review").innerText = data["phone"]; - - data["gender"] = document.querySelector( - 'input[name="gender"]:checked' - ).value; - document.getElementById("gender-review").innerText = data["gender"]; - - 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 + // Current Role Validation + const currentRole = document.getElementById("current-role"); + if (!currentRole.value.trim()) { + showError(currentRole, "Current role is required"); + isValid = false; + } else if (!currentRole.value.match(/^[A-Za-z]+(?: [A-Za-z]+)*$/)) { + showError(currentRole, "Current role should contain only letters and spaces"); + isValid = false; + } } - // 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(); - window.localStorage.setItem("formData", JSON.stringify(data)); - window.alert("Form submitted successfully"); - window.location.href = "/"; - }); +// Form submission handler +document.querySelector('button[type="submit"]').addEventListener("click", function(event) { + event.preventDefault(); + + window.localStorage.clear(); + window.localStorage.setItem("formData", JSON.stringify(data)); + + window.alert("Form submitted successfully!"); + window.location.href = "/"; +}); \ No newline at end of file