Bulma 步骤：我希望在进行下一步之前完成所有必填字段

Question

我使用这个教程：[https://wikiki.github.io/components/steps/][1] 我希望在进行下一步之前完成所有必填字段。怎么办？

谢谢

Answer 1

 bulmaSteps.attach();

<!-- begin snippet: js hide: false console: true babel: false -->




    <!-- begin snippet: js hide: false console: true babel: null -->



        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-steps@2.2.1/dist/css/bulma-steps.min.css">

        <div class="steps" id="stepsDemo">
          <div class="step-item is-active is-success">
            <div class="step-marker">1</div>
            <div class="step-details">
              <p class="step-title">Account</p>
            </div>
          </div>
          <div class="step-item">
            <div class="step-marker">2</div>
            <div class="step-details">
              <p class="step-title">Profile</p>
            </div>
          </div>
          <div class="step-item">
            <div class="step-marker">3</div>
            <div class="step-details">
              <p class="step-title">Social</p>
            </div>
          </div>
          <div class="step-item">
            <div class="step-marker">4</div>
            <div class="step-details">
              <p class="step-title">Finish</p>
            </div>
          </div>
          <div class="steps-content">
            <div class="step-content has-text-centered is-active">
              <div class="field is-horizontal">
                <div class="field-label is-normal">
                  <label class="label">Username</label>
                </div>
                <div class="field-body">
                  <div class="field">
                    <div class="control">
                      <input class="input" name="username" id="username" type="text" placeholder="Username" autofocus data-validate="require">
                    </div>
                  </div>
                </div>
              </div>
              <div class="field is-horizontal">
                <div class="field-label is-normal">
                  <label class="label">Password</label>
                </div>
                <div class="field-body">
                  <div class="field">
                    <div class="control has-icon has-icon-right">
                      <input class="input" type="password" name="password" id="password" placeholder="Password" data-validate="require">
                    </div>
                  </div>
                </div>
              </div>
              <div class="field is-horizontal">
                <div class="field-label is-normal">
                  <label class="label">Confirm password</label>
                </div>
                <div class="field-body">
                  <div class="field">
                    <div class="control has-icon has-icon-right">
                      <input class="input" type="password" name="password_confirm" id="password_confirm" placeholder="Confirm password" data-validate="require">
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="step-content has-text-centered">
              <div class="field is-horizontal">
                <div class="field-label is-normal">
                  <label class="label">Firstname</label>
                </div>
                <div class="field-body">
                  <div class="field">
                    <div class="control">
                      <input class="input" name="firstname" id="firstname" type="text" placeholder="Firstname" autofocus data-validate="require">
                    </div>
                  </div>
                </div>
              </div>
              <div class="field is-horizontal">
                <div class="field-label is-normal">
                  <label class="label">Last name</label>
                </div>
                <div class="field-body">
                  <div class="field">
                    <div class="control has-icon has-icon-right">
                      <input class="input" type="text" name="lastname" id="lastname" placeholder="Last name" data-validate="require">
                    </div>
                  </div>
                </div>
              </div>
              <div class="field is-horizontal">
                <div class="field-label is-normal">
                  <label class="label">Email</label>
                </div>
                <div class="field-body">
                  <div class="field">
                    <div class="control has-icon has-icon-right">
                      <input class="input" type="email" name="email" id="email" placeholder="Email" data-validate="require">
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="step-content has-text-centered">
              <div class="field is-horizontal">
                <div class="field-label is-normal">
                  <label class="label">Facebook account</label>
                </div>
                <div class="field-body">
                  <div class="field">
                    <div class="control">
                      <input class="input" name="facebook" id="facebook" type="text" placeholder="Facebook account url" autofocus data-validate="require">
                    </div>
                  </div>
                </div>
              </div>
              <div class="field is-horizontal">
                <div class="field-label is-normal">
                  <label class="label">Twitter account</label>
                </div>
                <div class="field-body">
                  <div class="field">
                    <div class="control">
                      <input class="input" name="twitter" id="twitter" type="text" placeholder="Twitter account url" autofocus data-validate="require">
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="step-content has-text-centered">
              <h1 class="title is-4">Your account is now created!</h1>
            </div>
          </div>
          <div class="steps-actions">
            <div class="steps-action">
              <a href="#" data-nav="previous" class="button is-light">Previous</a>
            </div>
            <div class="steps-action">
              <a href="#" data-nav="next" class="button is-light">Next</a>
            </div>
          </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/bulma-steps@2.2.1/dist/js/bulma-steps.js"></script>

    

<!-- end snippet -->