I am looking for a code snippet that will stop and trigger validation on the stepper when the user clicks next. I have a script that compares values of two fields and if they are different i want to trigger validation and stop the stepper from proceeding. Any ideas? This below is not working:

const stepOne = document.querySelectorAll('.stepper .stepper-step')[0];
stepOne.addEventListener('onChangeStep.mdb.stepper', () => {
var a = parseFloat(approvalAmount.value.replace(/\$|,/g, ''));
var b = parseFloat(totalEngagementAmount.value.replace(/\$|,/g, ''));
if (a > b) {
stepOne.classList.add('data-mdb-stepper-invalid')
} });