assignment_multistep_form/script.js

let currentStep = 1;

function nextStep(step) {
  
    if (!validateStep(currentStep)) {
        return;
    }

    document.getElementById(`step${currentStep}`).classList.add('hidden');
    document.getElementById(`indicator-step${currentStep}`).classList.remove('active');
    
    currentStep = step;
    document.getElementById(`step${currentStep}`).classList.remove('hidden');
    document.getElementById(`indicator-step${currentStep}`).classList.add('active');
    if(step === 3){
      populateReview();
    }
    
}


function validateStep(step) {
    let isValid = true;
 
    if (step === 1) {
        isValid = validatePersonalDetails();
    }

    if (step === 2) {
        isValid = validateProfessionalDetails();
    }


    return isValid;
}
 

function validatePersonalDetails() {
    let isValid = true;

    const fullname = document.getElementById("Fullname").value;
    if (!fullname.match(/[a-zA-Z ]{3,}/)) {
        document.getElementById("error-fullname").innerText = "Full name must be at least 3 letters";
        isValid = false;
    } else {
        document.getElementById("error-fullname").innerText = "";
    }

    const email = document.getElementById("email").value;
    if (!email.includes('@')) {
        document.getElementById("error-email").innerText = "Please enter a valid email address";
        isValid = false;
    } else {
        document.getElementById("error-email").innerText = "";
    }

    const phone = document.getElementById("phone").value;
    if (!/^\d{10}$/.test(phone)) {
        document.getElementById("error-phone").innerText = "Phone number must be exactly 10 digits";
        isValid = false;
        alert("Phone number invalid. It must be exactly 10 digits.");
    } else {
        document.getElementById("error-phone").innerText = "";
    }

    const gender = document.querySelector('input[name="gender"]:checked');
    if (!gender) {
        document.getElementById("error-gender").innerText = "Please select your gender";
        isValid = false;
    } else {
        document.getElementById("error-gender").innerText = "";
    }

    const age = document.getElementById("age").value;
    if (age < 18 || age > 100) {
        document.getElementById("error-age").innerText = "Age must be between 18 and 100";
        isValid = false;
    } else {
        document.getElementById("error-age").innerText = "";
    }

    return isValid;
}



function validateProfessionalDetails() {
    let isValid = true;
    const education = document.getElementById("education").value;
    if (!education) {
        document.getElementById("error-education").innerText = "Please select your education";
        isValid = false;
    } else {
        document.getElementById("error-education").innerText = "";
    }


    const skills = document.querySelectorAll('input[name="skills"]:checked');
    if (skills.length === 0) {
        document.getElementById("error-skills").innerText = "Please select at least one skill";
        isValid = false;
    } else {
        document.getElementById("error-skills").innerText = "";
    }

    const experience = document.getElementById("experience").value;
    if (experience < 0 || experience > 50) {
        document.getElementById("error-experience").innerText = "Experience must be between 0 and 50 years";
        isValid = false;
    } else {
        document.getElementById("error-experience").innerText = "";
    }

    
    const currentRole = document.getElementById("currentrole").value;
    if (!currentRole) {
        document.getElementById("error-currentrole").innerText = "Please enter your current role";
        isValid = false;
    } else {
        document.getElementById("error-currentrole").innerText = "";
    }

    return isValid;
}

document.getElementById('multistepForm').addEventListener('submit', 

function (event) {
    event.preventDefault();

    const formData = new FormData(this);
    const data = Object.fromEntries(formData.entries());

    const skills = formData.getAll('skills');
    data.skills = skills;

    localStorage.setItem('formData', JSON.stringify(data));

    const jsonData = JSON.stringify(data, null, 2);
    const blob = new Blob([jsonData], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'formData.json';
    link.click();

    alert('Form submitted successfully!');
});

function loadFormData() {
    const savedData = JSON.parse(localStorage.getItem('formData'));

    if (savedData) {
        document.getElementById('Fullname').value = savedData.Fullname || '';
        document.getElementById('email').value = savedData.email || '';
        document.getElementById('phone').value = savedData.phone || '';
        document.getElementById('age').value = savedData.age || '';
        document.getElementById('education').value = savedData.education || '';
        document.getElementById('experience').value = savedData.experience || '';
        document.getElementById('currentrole').value = savedData.currentrole || '';

        savedData.skills.forEach(skill => {
            document.querySelector(`input[name="skills"][value="${skill}"]`).checked = true;
        });
    }
}
function editStep(step){
    document.getElementById(`step${currentStep}`).classList.add('hidden');
    document.getElementById(`indicator-step${currentStep}`).classList.remove('active');
    currentStep = parseInt(step.replace('step',''));
    document.getElementById(`step${currentStep}`).classList.remove('hidden');
    document.getElementById(`indicator-step${currentStep}`).classList.add('active');
}
function populateReview() {
   
    const form = document.getElementById('multistepForm');

    document.getElementById('reviewFullName').innerText = form.querySelector('#Fullname').value;
    document.getElementById('reviewEmail').innerText = form.querySelector('#email').value;
    document.getElementById('reviewPhone').innerText = form.querySelector('#phone').value;
    document.getElementById('reviewGender').innerText = form.querySelector('input[name="gender"]:checked')?.value || 'Not specified';
    document.getElementById('reviewAge').innerText = form.querySelector('#age').value;
    document.getElementById('reviewEducation').innerText = form.querySelector('#education').value;
    document.getElementById('reviewExperience').innerText = form.querySelector('#experience').value;

    const skills = Array.from(form.querySelectorAll('input[name="skills"]:checked')).map(skill => skill.value);
    document.getElementById('reviewSkills').innerText = skills.length > 0 ? skills.join(', ') : 'None selected';

    document.getElementById('reviewCurrentRole').innerText = form.querySelector('#currentrole').value;
}
function clearform() {
    const form = document.getElementById('multistepForm');
    form.reset();
    localStorage.removeItem('formData');
    document.getElementById('reviewFullName').innerText = "";
    document.getElementById('reviewEmail').innerText = "";
    document.getElementById('reviewPhone').innerText = "";
    document.getElementById('reviewGender').innerText = "";
    document.getElementById('reviewAge').innerText = "";
    document.getElementById('reviewEducation').innerText = "";
    document.getElementById('reviewExperience').innerText = "";
    document.getElementById('reviewSkills').innerText = "";
    document.getElementById('reviewCurrentRole').innerText = "";
    
    document.getElementById('step1').classList.remove('hidden');
    document.getElementById('indicator-step1').classList.add('active');

    for (let i = 2; i <= 3; i++) {
        document.getElementById(`step${i}`).classList.add('hidden');
        document.getElementById(`indicator-step${i}`).classList.remove('active');
    }
    currentStep = 1;
}

window.onload = loadFormData;