Merge pull request 'Basic structure html and form navigation' (#1) from dev into main
Reviewed-on: #1
This commit is contained in:
commit
0c8fc30abc
|
|
@ -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>
|
||||
|
|
|
|||
232
script.js
232
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 = "/";
|
||||
});
|
||||
Loading…
Reference in a new issue