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