Step form does not work

[QJan84]

Hello,

I have split a form into several fieldset and then stitch through the individual fieldset. Before I get to the next fieldset, the validation should take place first and then, if everything is valid, the next step should be displayed.

Inactive fieldsets are :disabled, so that the form fields are not considered for validation. With the active fieldset :disabled is removed and thus the validation is active.

In the docs there's an example of this in steps.html, which I don't quite understand.

<button type="button" @click="++step" :disabled="!$validate.isComplete($refs.contact)">Next</button>

How does the validation take place here? I have to validate first and then go to the next step, don't I? Does the :disabled make any sense here?

Test HTML:

<section x-data="myform()">
  <form x-data x-validate @submit="$validate.submit" x-ref="form">

    <fieldset x-show="currentStep == 1" :disabled="currentStep != 1">
      <label>
        <input type="checkbox" id="newsletter" name="weeklyNewsletter" x-model="newsletter" data-error-msg='Sie müssen den Newsletter abonnieren' required>
        Newsletter
      </label>
      <div class="mt-12">
        <p>When clicking the button, the active fieldset (step1) should be validated and then go to step 2 if everything is valid.</p>
        <button type="button" @click="nextStep()">Go to Step 2</button>
      </div>
    </fieldset>

    <fieldset x-show="currentStep == 2" :disabled="currentStep != 2">
      <div class="space-y-1">
        <label for="vorname" class="label-input">Vorname <span class="form-required">*</span></label>
        <div>
          <input type="text" class="form-input" id="vorname" name="Vorname" x-model="vorname" data-error-msg='Sie müssen Ihren Vornamen eingeben' required>
        </div>
      </div>
      <div class="space-y-1">
        <label for="nachname" class="label-input">Nachname <span class="form-required">*</span></label>
        <div>
          <input type="text" class="form-input" id="nachname" name="Nachname" x-model="nachname" data-error-msg='Sie müssen Ihren Nachnamen eingeben' required>
        </div>
      </div>
      <div class="mt-12">
        <p>When clicking the button, the active fieldset (step2) should be validated and then go to step 3 if everything is valid.</p>
        <button type="button" @click="nextStep()">Go to Step 3</button>
      </div>
    </fieldset>

    <fieldset x-show="currentStep == 3" :disabled="currentStep != 3">
      ...
      ...
      ...
    </fieldset>

  </form>
</section>

JS:

<script>
  document.addEventListener('alpine:init', () => {
    Alpine.data('myform', function() {
      return {
        currentStep: 1,
        init() {
          // nothing
        },
        nextStep(){
          // 1.) validate current fieldset (How can I start the validation here?)
          // 2.) if valid, go to next step
          // 3.) if invalid, show error messages
        }
      }
    })

  });
</script>

[colinaut]

Closing this issue and folding it into #14 since that one targets the issue here.

[colinaut]

@QJan84 sorry I closed this without really answering your question.

Anyways the step.html works because the next button is disabled until the fieldset it is in is completed. I'm using x-show to hide each step and not disabled. Disabled isn't the right attribute for fieldset steps since it is supposed to disable the validation of the fieldset as you mention in issue #14