multistep wizard form not validating on second page

[pmonty]

I have this code on my next button

$("#form0").validate({ rules: validation["rules"][0] });
$("#form1").validate({ rules: validation["rules"][1] });
$("#form2").validate({ rules: validation["rules"][2] });
$("#form3").validate({ rules: validation["rules"][3] });
$("#form4").validate({ rules: validation["rules"][4] });
$("#form5").validate({ rules: validation["rules"][5] });

if ($(`#form${currentPage}`).valid()) {
   //valid
else {
   //invalid
 }

This code is in my nextButton click handler and works for the first page. The second page despite a field purposefully not being valid it says it is. The form elements id is dynamic and changes correctly so the next step the forms id is id="form1"

anyone know what the issue is?

I had it a little different initially as I am using react but didn't work

const $formElmt = $(formElmt.current)

var validator = $formElmt.validate({
  rules: validation["rules"][currentPage]
});

const valid = validator.form();

if (!valid) {
  setValidationError(true);
  return;
}

but this setup had the same experience where subsequent pages didn't work unless the validation is on the input as attributes instead of in rules.

[Kieran]

Validating multiple forms on the same page should work fine. Need a reproducer to understand the issue.

[pmonty]

Got this sandbox though can't get the jquery-validation script in the html to be recognised so get an error on .validate()

https://codesandbox.io/s/condescending-noether-gph9dy?file=/src/App.js

though the structure is there so should be able to get a feel for it.

@bytestream let me know if that works for you. Basically the code that i have in the sandbox is JSX generated that is then run by @babel/standalone inside my react app and works except for the issue with subsequent pages.

[pmonty]

Just noticed in my actual app where it runs. If I go back to the first form and make it invalid then it won't be valid and can't go to next page.

I suspected that it can't validate once the first validate is run but doesn't seem to be the case. Cause first page can validate multiple infinitely

[pmonty]

ended up putting a validator.destroy() once form is confirmed to be valid then it worked for the next step and still worked if you go back and make the first form invalid :) I wis initially trying .reset() and .resetForm()

  const nextStep = () => {
    const $formElmt = $(formElmt.current);

    var validator = $formElmt.validate({
      rules: validation["rules"][currentPage]
    });
    const valid = validator.form();

    if (!valid) {
      setValidationError(true);
      return;
    }
    validator.destroy();
    setCurrentPage(currentPage + 1);
  };