...
Step 20: Save the form and preview to ensure everything is working as expected
...
Troubleshooting Validation Error
...
In case of a validation error like the image above, change the code for the ‘Next’ button to match:
| Code Block |
|---|
progressStepper[index].classList.remove('errors');
//progressStepper[index].classList.remove('completed');
//progressStepper[index].classList.add('errors');
progressStepper[index].classList.add('completed'); |
Similarly, change the ‘Previous’ button to match:
| Code Block |
|---|
progressStepper[index].classList.remove('errors');
progressStepper[index].classList.remove('active');
progressStepper[index].classList.add('disabled');
progressStepper[(index-1)].classList.add('active');
progressStepper[(index-1)].classList.remove('errors'); |
And change the code in Step 15 to match:
| Code Block |
|---|
const lists = document.querySelectorAll(".progressStepper ul li");
const progressStepper = document.querySelectorAll(".stepper ul li");
const hiddenComponent = util.getComponent(form.components, 'stepperHidden');
for(let [index, li] of lists.entries()) {
if (li.getAttribute("class").includes('active'))
{
leftOfIndex(index);
rightOfIndex(index, progressStepper.length)
progressStepper[index].classList.remove('errors');
progressStepper[index].classList.remove('disabled');
progressStepper[index].classList.add('active');
}
}
function leftOfIndex(index){
for(let i=0; i<index; i++) {
progressStepper[i].classList.remove('active');
progressStepper[i].classList.remove('disabled');
progressStepper[i].classList.add('errors');
}
}
function rightOfIndex(index, endIndex){
for (let i=(endIndex-1); i>index; i--){
progressStepper[i].classList.remove('errors');
progressStepper[i].classList.remove('active');
progressStepper[i].classList.add('disabled');
}
} |