使用 bootstrap 的注册表单上的下一步按钮出现问题

Question

当我的所有必填输入字段都填满时，我需要单击“下一步”按钮，然后只有以下表格出现。但是在这段代码中，只要我点击下一步，它就会进入下一个，但只有在所有字段都填满时才提交。当用户忘记输入字段然后转到下一个表单然后无法提交时，这可能会使用户感到困惑。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!--Added by online for Register-->
<nav>
  <button data-toggle="modal" data-target="#myModal2" role="button" class="btn btn-outline-info my-2 my-sm-0" type="submit"><b>Register</b></button>
  <div class="modal fade bs-example-modal-sm" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="myModalLabel">Register</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>

        </div>
        <div class="modal-body">
          <form name="reg-form">
            <div class="form-group">
              <label for="username" class="control-label">Name:</label>
              <input type="text" class="form-control" id="username" required>
            </div>
            <div class="form-group">
              <label for="email" class="control-label">Email:</label>
              <input type="email" class="form-control" id="email" required>
            </div>
            <div class="form-group">
              <label for="passward" class="control-label">passward:</label>
              <input type="password" class="form-control" id="password" required>

            </div>
            <div class="form-group">
              <label for="con-passward" class="control-label">Confirm passward:</label>
              <input type="password" class="form-control" id="password" required>

            </div>
            <div class="form-group">
              <!------------------------------------------------------------------------------->
              <button data-toggle="modal" data-target="#myModal3" role="button" class="btn btn-outline-info my-2 my-sm-0" type="submit"><b>Next</b></button>
              <div class="modal fade bs-example-modal-sm" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h4 class="modal-title" id="myModalLabel">Next Form</h4>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>

                    </div>
                    <div class="modal-body">
                      <form name="reg-form">
                        <div class="form-group">
                          <label for="age" class="control-label">Age:</label>
                          <input type="number" class="form-control" id="age" required>
                        </div>
                        <div class="form-group">
                          <label for="add" class="control-label">Address:</label>
                          <input type="text" class="form-control" id="add" required>
                        </div>

                        <div class="form-group">
                          <label for="con" class="control-label">Contact:</label>
                          <input type="text" class="form-control" id="con" required>

                        </div>
                        <div class="form-group">
                          <button type="submit" class="btn btn-success" value="submit">Submit</button>
                          <!--button type="button" class="btn btn-danger" data-dismiss="modal">Close</button-->
                          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        </div>
                      </form>
                    </div>

                  </div>
                </div>
              </div>
              <!------------------------------------------------------------------------------------------------>

            </div>
          </form>
        </div>

      </div>
    </div>
  </div>
</nav>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

Answer 1

只需在前几个输入周围添加一个 id，然后检查它们是否为空。

$('#next').on('click', function(evt) {
  $('#firstModal input:required').each(function() {
    if ($(this).val() === '') evt.stopPropagation();
  });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!--Added by online for Register-->
<nav>
  <button data-toggle="modal" data-target="#myModal2" role="button" class="btn btn-outline-info my-2 my-sm-0" type="submit"><b>Register</b></button>
  <div class="modal fade bs-example-modal-sm" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="myModalLabel">Register</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

        </div>
        <div class="modal-body">
          <form name="reg-form">
            <div id="firstModal">
              <div class="form-group">
                <label for="username" class="control-label">Name:</label>
                <input type="text" class="form-control" id="username" required>
              </div>
              <div class="form-group">
                <label for="email" class="control-label">Email:</label>
                <input type="email" class="form-control" id="email" required>
              </div>
              <div class="form-group">
                <label for="passward" class="control-label">passward:</label>
                <input type="password" class="form-control" id="password" required>

              </div>
              <div class="form-group">
                <label for="con-passward" class="control-label">Confirm passward:</label>
                <input type="password" class="form-control" id="password_validate" required>

              </div>
            </div>
            <div class="form-group">
              <!------------------------------------------------------------------------------->
              <button data-toggle="modal" data-target="#myModal3" role="button" class="btn btn-outline-info my-2 my-sm-0" type="submit" id="next"><b>Next</b></button>
              <div class="modal fade bs-example-modal-sm" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h4 class="modal-title" id="myModalLabel">Next Form</h4>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                    </div>
                    <div class="modal-body">
                      <form name="reg-form">
                        <div class="form-group">
                          <label for="age" class="control-label">Age:</label>
                          <input type="number" class="form-control" id="age" required>
                        </div>
                        <div class="form-group">
                          <label for="add" class="control-label">Address:</label>
                          <input type="text" class="form-control" id="add" required>
                        </div>

                        <div class="form-group">
                          <label for="con" class="control-label">Contact:</label>
                          <input type="text" class="form-control" id="con" required>

                        </div>
                        <div class="form-group">
                          <button type="submit" class="btn btn-success" value="submit">Submit</button>
                          <!--button type="button" class="btn btn-danger" data-dismiss="modal">Close</button-->
                          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        </div>
                      </form>
                    </div>

                  </div>
                </div>
              </div>
              <!------------------------------------------------------------------------------------------------>

            </div>
          </form>
        </div>

      </div>
    </div>
  </div>
</nav>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

使用 bootstrap 的注册表单上的下一步按钮出现问题

Problem with next button on registration form using bootstrap

html

bootstrap-modal

bootstrap-4