veerjot_dml/assignment_multistep_form
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

new update

Browse source
This commit is contained in:
veerjot_dm 2024-12-27 10:53:27 +05:30
parent 1f4a648db2
commit 0b6c0e353a
3 changed files with 14 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
form.html
View file

@ -51,13 +51,12 @@
<h1>Professional Details</h1> <h1>Professional Details</h1>
<label for="education">Education</label> <label for="education">Education</label>
<select id="education" name="education" required> <select id="education" name="education" required>
<option value="B.tech">B.tech</option> <option value="B.tech">PG</option>
<option value="M.tech">M.tech</option> <option value="M.tech">UG</option>
<option value="BCA">BCA</option> <option value="BCA">Diploma</option>
<option value="MCA">MCA</option> <option value="MCA">12th</option>
<option value="B.com">B.com</option> <option value="B.com">10th</option>
<option value="M.com">M.com</option>
<option value="Other">Other</option>
</select> </select>
<span class="error" id="error-education"></span> <span class="error" id="error-education"></span>

13
script.js
View file

@ -13,7 +13,7 @@ function nextStep(step) {
document.getElementById(`step${currentStep}`).classList.remove('hidden'); document.getElementById(`step${currentStep}`).classList.remove('hidden');
document.getElementById(`indicator-step${currentStep}`).classList.add('active'); document.getElementById(`indicator-step${currentStep}`).classList.add('active');
if(step === 3){ if(step === 3){
isValid = populateReview(); populateReview();
} }
} }
@ -55,14 +55,14 @@ function validatePersonalDetails() {
} }
const phone = document.getElementById("phone").value; const phone = document.getElementById("phone").value;
if (!phone.match(/\d{10}/)) { if (!/^\d{10}$/.test(phone)) {
document.getElementById("error-phone").innerText = "Phone number must be 10 digits"; document.getElementById("error-phone").innerText = "Phone number must be exactly 10 digits";
isValid = false; isValid = false;
alert("Phone number invalid. It must be exactly 10 digits.");
} else { } else {
document.getElementById("error-phone").innerText = ""; document.getElementById("error-phone").innerText = "";
} }
const gender = document.querySelector('input[name="gender"]:checked'); const gender = document.querySelector('input[name="gender"]:checked');
if (!gender) { if (!gender) {
document.getElementById("error-gender").innerText = "Please select your gender"; document.getElementById("error-gender").innerText = "Please select your gender";
@ -191,6 +191,7 @@ function populateReview() {
function clearform() { function clearform() {
const form = document.getElementById('multistepForm'); const form = document.getElementById('multistepForm');
form.reset(); form.reset();
localStorage.removeItem('formData');
document.getElementById('reviewFullName').innerText = ""; document.getElementById('reviewFullName').innerText = "";
document.getElementById('reviewEmail').innerText = ""; document.getElementById('reviewEmail').innerText = "";
document.getElementById('reviewPhone').innerText = ""; document.getElementById('reviewPhone').innerText = "";
@ -201,9 +202,6 @@ function clearform() {
document.getElementById('reviewSkills').innerText = ""; document.getElementById('reviewSkills').innerText = "";
document.getElementById('reviewCurrentRole').innerText = ""; document.getElementById('reviewCurrentRole').innerText = "";
document.getElementById('review').classList.add('hidden');
currentStep = 1;
document.getElementById('step1').classList.remove('hidden'); document.getElementById('step1').classList.remove('hidden');
document.getElementById('indicator-step1').classList.add('active'); document.getElementById('indicator-step1').classList.add('active');
@ -211,6 +209,7 @@ function clearform() {
document.getElementById(`step${i}`).classList.add('hidden'); document.getElementById(`step${i}`).classList.add('hidden');
document.getElementById(`indicator-step${i}`).classList.remove('active'); document.getElementById(`indicator-step${i}`).classList.remove('active');
} }
currentStep = 1;
} }
window.onload = loadFormData; window.onload = loadFormData;

2
style.css
View file

@ -11,7 +11,7 @@ body {
} }
.formContainer { .formContainer {
background: #006F90; background: #49a1bc;
padding: 20px; padding: 20px;
border-radius: 9px; border-radius: 9px;
width: 100%; width: 100%;