diff --git a/form.html b/form.html index c77487c..32dfe43 100644 --- a/form.html +++ b/form.html @@ -51,13 +51,12 @@

Professional Details

diff --git a/script.js b/script.js index 1e8ad17..10162cd 100644 --- a/script.js +++ b/script.js @@ -13,7 +13,7 @@ function nextStep(step) { document.getElementById(`step${currentStep}`).classList.remove('hidden'); document.getElementById(`indicator-step${currentStep}`).classList.add('active'); if(step === 3){ - isValid = populateReview(); + populateReview(); } } @@ -55,14 +55,14 @@ function validatePersonalDetails() { } const phone = document.getElementById("phone").value; - if (!phone.match(/\d{10}/)) { - document.getElementById("error-phone").innerText = "Phone number must be 10 digits"; + 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"; @@ -191,6 +191,7 @@ function populateReview() { function clearform() { const form = document.getElementById('multistepForm'); form.reset(); + localStorage.removeItem('formData'); document.getElementById('reviewFullName').innerText = ""; document.getElementById('reviewEmail').innerText = ""; document.getElementById('reviewPhone').innerText = ""; @@ -200,10 +201,7 @@ function clearform() { document.getElementById('reviewExperience').innerText = ""; document.getElementById('reviewSkills').innerText = ""; document.getElementById('reviewCurrentRole').innerText = ""; - - document.getElementById('review').classList.add('hidden'); - - currentStep = 1; + document.getElementById('step1').classList.remove('hidden'); document.getElementById('indicator-step1').classList.add('active'); @@ -211,6 +209,7 @@ function clearform() { document.getElementById(`step${i}`).classList.add('hidden'); document.getElementById(`indicator-step${i}`).classList.remove('active'); } + currentStep = 1; } window.onload = loadFormData; diff --git a/style.css b/style.css index b0bd028..4bb0fb6 100644 --- a/style.css +++ b/style.css @@ -11,7 +11,7 @@ body { } .formContainer { - background: #006F90; + background: #49a1bc; padding: 20px; border-radius: 9px; width: 100%;