javascript - 形成多步 javascript 和引导程序

Question

我将组件步进器用于我正在研究的多步表单，但我有错误很可能是由于代码编译错误。

在示例中，您可以看到一切正常，直到进入第三步，也就是说，当您单击下一步按钮时，表单将返回起点并且不会前进到第三步。

你能建议我一个更好的代码来继续前进吗？

提前谢谢了

const stepper = new mdb.Stepper(document.getElementById('stepper-form-example'));

document.getElementById('next-step').addEventListener('click', () => {
    stepper.nextStep();
});

document.getElementById('prev-step').addEventListener('click', () => {
    stepper.previousStep();
});

document.getElementById('next-step2').addEventListener('click', () => {
    stepper.nextStep(2);
});

document.getElementById('prev-step2').addEventListener('click', () => {
    stepper.previousStep();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.css" rel="stylesheet"/>
<ul class="stepper" id="stepper-form-example" data-mdb-stepper-linear="true">
        <form class="needs-validation stepper-form">
            <!-- primo step -->
            <li id="step-uno" class="stepper-step stepper-active">
                <div class="stepper-head">
                    <span class="stepper-head-icon"> 1 </span>
                    <span class="stepper-head-text"> step1 </span>
                </div>
                <div class="stepper-content py-3">
                    <div class="form-outline mb-4">
                        <input type="text" id="stepper-form-nome" class="form-control" required />
                        <label class="form-label" for="stepper-form-nome" >Nome
                            <small class="text-muted">(obbligatorio)</small></label>
                        <div class="invalid-feedback">Inserisci nome</div>
                    </div>

                    <div class="form-outline mb-4">
                        <input type="text" id="stepper-form-cognome"
                                class="form-control" required />
                        <label class="form-label" for="stepper-form-cognome">Cognome
                            <small class="text-muted">(obbligatorio)</small></label>
                        <div class="invalid-feedback">Inserisci cognome</div>
                    </div>
                    <!-- Pulsanti nav -->
                    <div class="d-flex justify-content-center px-3">
                        <button id="next-step" class="btn btn-primary w-100">
                            Step successivo
                        </button>
                    </div>
                    <!-- Fine pulsanti nav -->
                </div>
            </li>
            <!-- Fine primo step -->

            <!-- Secondo step -->
            <li id="step-due" class="stepper-step">
                <div class="stepper-head">
                    <span class="stepper-head-icon"> 2 </span>
                    <span class="stepper-head-text"> step2 </span>
                </div>
                <div class="stepper-content py-3">
                    <div class="form-outline mb-4">
                        <input type="text" id="stepper-form-azienda" class="form-control" />
                        <label class="form-label" for="stepper-form-azienda">Azienda
                            <small class="text-muted">(facoltativo)</small></label>

                    </div>

                    <div class="form-outline mb-4">
                        <input type="text" id="stepper-form-indirizzo" class="form-control" required />
                        <label class="form-label" for="stepper-form-indirizzo">Indirizzo
                            <small class="text-muted">(obbligatorio)</small></label>
                        <div class="invalid-feedback">Inserisci indirizzo</div>
                    </div>

                    <div class="form-outline mb-4">
                        <input type="email" id="stepper-form-email" class="form-control" required />
                        <label class="form-label" for="stepper-form-email">Email
                            <small class="text-muted">(obbligatorio)</small></label>
                        <div class="invalid-feedback">Inserire email valida (formato xxx@zzz.)</div>
                    </div>

                    <div class="form-outline mb-4">
                        <input type="tel" id="stepper-form-tel" class="form-control" required pattern="[0-9]{3}-[0-9]{7}" />
                        <label class="form-label" for="stepper-form-tel">Phone
                            <small class="text-muted">(obbligatorio)</small></label>
                        <div class="invalid-feedback">Inserisci numero di telefono valido (formato xxx-xxxxxxx)</div>
                    </div>
                    <!-- Pulsanti nav -->
                    <div class="d-flex justify-content-center px-3">
                        <button id="prev-step" class="btn btn-primary w-100 me-2">
                            Step precedente
                        </button>
                        <button id="next-step2" class="btn btn-primary w-100">
                            Step successivo
                        </button>
                    </div>
                    <!-- Fine pulsanti nav -->
                </div>
            </li>
            <!-- Fine secondo step -->

            <!-- Terzo step -->
            <li id="step-tre" class="stepper-step">
                <div class="stepper-head">
                    <span class="stepper-head-icon"> 3 </span>
                    <span class="stepper-head-text"> step3 </span>
                </div>
                <div class="stepper-content py-3">

                    <select id="cucuzza" class="select form-control" data-mdb-filter="true">
                      </select>
                    <div class="form-outline mb-4">
                        <input type="text" id="form1" class="form-control" />
                        <label class="form-label" for="form1">Test di intelligenza</label>
                        <div class="form-helper">Sarà intelligente?</div>
                    </div>

                    <div class="form-check d-flex justify-content-center mb-4">
                        <input class="form-check-input me-2" type="checkbox" value="" id="stepper-form-reg" checked />
                        <label class="form-check-label" for="stepper-form-reg">
                            Vuoi creare un account?
                        </label>
                    </div>
                    <!-- Pulsanti nav -->
                    <div class="d-flex justify-content-center px-3">
                        <button id="prev-step2" class="btn btn-primary w-100 me-2">
                            Step precedente
                        </button>
                        <button name="invia" id="submit" type="submit" class="btn btn-success btn-block mb-4">
                            Invia
                        </button>
                    </div>
                    <!-- Fine pulsanti nav -->

                </div>
            </li>
            <!-- Fine terzo step -->
        </form>
    </ul>

标签： javascriptformsbootstrap-4bootstrap-5multi-step