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>
<label for="education">Education</label>
<select id="education" name="education" required>
<option value="B.tech">B.tech</option>
<option value="M.tech">M.tech</option>
<option value="BCA">BCA</option>
<option value="MCA">MCA</option>
<option value="B.com">B.com</option>
<option value="M.com">M.com</option>
<option value="Other">Other</option>
<option value="B.tech">PG</option>
<option value="M.tech">UG</option>
<option value="BCA">Diploma</option>
<option value="MCA">12th</option>
<option value="B.com">10th</option>
</select>
<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(`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 = "";
@ -201,9 +202,6 @@ function clearform() {
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;

2
style.css
View file

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