jquery - Bootstrap : Form implementation using modal within modal

Question

我正在使用单击按钮实现登录表单。然后在第一个登录表单模式中，我想使用第一个模式中的按钮打开另一个模式。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>




<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ModalCenter">
                Log In/ Sign Up
            </button>

<div class="modal fade" id="ModalCenter" data-toggle="modal" data-target=".bd-modal-xl" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h5 class="modal-title w-100" id="ModalCenterTitle"><b>Login To Your Account</b></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
      </div>
      <div class="modal-body">
        <div class="container-fluid col-md-10 offset-2">
          <form id="logform" action="Login.php" method="POST">


            <div class="form-group row">
              <label for="userid" class="col-form-label col-md-4">User Name: </label>
              <div class="col-md-6">
                <input type="text" class="form-control" name="username" id="username" placeholder="User Name" required>
              </div>
            </div>

            <div class="form-group row">
              <label for="password" class="col-form-label col-md-4">Password: </label>
              <div class="col-md-6">
                <input type="password" class="form-control" name="password" id="password" placeholder="Password" required>
              </div>
            </div>

            <div class="form-group">
              <div class="row">
                <label class="col-form-label col-md-4" for="course">User Type:</label>
                <div class="col-md-6">
                  <select id="course" class="form-control" required>
                    <option value="" selected>Choose any:</option>
                    <option value="student">Student</option>
                    <option value="teacher">Teacher</option>
                    <option value="admin">Admin</option>
                  </select>
                </div>
              </div>
            </div>

            <div class="form-group row  col-md-6 offset-5">
              <a href="#"><label class="col-form-label">Forget Password ?</label></a>
            </div>

            <div class="form-group row">
              <div class="col-md-6">
                <button type="reset" class="btn btn-danger">Reset</button>
              </div>

              <div class="col-md-3 offset-1">
                <button type="submit" class="btn btn-success" form="logform">Log
                                                In</button>
              </div>
            </div>

            <br>

            <div class=" form-group row col-md-8 offset-2">
              <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ModalScrollable">
                                            New User ? Sign Up </button>



              <div class="modal fade" id="ModalScrollable" tabindex="-1" role="dialog" aria-labelledby="ModalScrollableTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="ModalScrollableTitle">Create a new account
                      </h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                    </div>
                    <div class="modal-body">
                      <div class="container-fluid col-md-12">

                        <form id="regform" action="#" method="POST">


                          <br>

                          <div class="form-group row">
                            <label for="fname" class="col-form-label col-md-6">First Name:
                                                                    </label>
                            <div class="col-md-6">
                              <input type="text" class="form-control" name="firstname" id="fname" placeholder="First Name" required>
                            </div>
                          </div>

                          <div class="form-group row">
                            <label for="lname" class="col-form-label col-md-6">Last Name:
                                                                    </label>
                            <div class="col-md-6">
                              <input type="text" class="form-control" name="lastname" id="lname" placeholder="Last Name" required>
                            </div>
                          </div>


                          <fieldset class="form-group">
                            <div class="row">
                              <label class="col-form-label col-md-6">Gender:</label>

                              <div class="col-md-6">
                                <div class="form-check">
                                  <input class="form-check-input" type="radio" name="gender" id="male" required>
                                  <label class="form-check-label" for="male">Male</label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                  <input class="form-check-input" type="radio" name="gender" id="female">
                                  <label class="form-check-label" for="female">Female</label>

                                </div>
                              </div>
                            </div>
                          </fieldset>

                          <div class="form-group">
                            <div class="row">
                              <label class="col-form-label col-md-6" for="course">Course:</label>
                              <div class="col-md-6">
                                <select id="course" class="form-control" required>
                                  <option value="" selected>Choose from following:
                                  </option>
                                  <option value="bca">BCA</option>
                                  <option value="mca">MCA</option>
                                </select>
                              </div>
                            </div>
                          </div>

                          <div class="form-group row">
                            <label for="emid" class="col-form-label col-md-6">Email-ID:
                                                                    </label>
                            <div class="col-md-6">
                              <input type="email" class="form-control" name="email" id="emid" placeholder="Enter your Email-ID" required>
                            </div>
                          </div>

                          <div class="form-group row">
                            <label for="uname" class="col-form-label col-md-6">New User Name:
                                                                    </label>
                            <div class="col-md-6">
                              <input type="text" class="form-control" name="uname" id="uname" placeholder="Enter a New User Name" required>
                            </div>
                          </div>

                          <div class="form-group row">
                            <label for="npwd" class="col-form-label col-md-6">New Password:
                                                                    </label>
                            <div class="col-md-6">
                              <input type="password" class="form-control" name="newpassword" id="npwd" placeholder="Enter a New Password" required>
                            </div>
                          </div>

                          <div class="form-group row">
                            <label for="rpwd" class="col-form-label col-md-6">Retype Password:
                                                                    </label>
                            <div class="col-md-6">
                              <input type="password" class="form-control" name="rtpassword" id="rpwd" placeholder="Retype the password" required>
                            </div>
                          </div>

                          <div class="form-group">
                            <div class="row">
                              <label class="col-form-label col-md-6" for="secques">Security Question:</label>
                              <div class="col-md-6">
                                <select id="secques" class="form-control" required>
                                  <option value="" selected>Choose from following:
                                  </option>
                                  <option value="1">In which city you were born?
                                  </option>
                                  <option value="2">What was your first pet's name?</option>
                                </select>
                              </div>
                            </div>
                          </div>

                          <div class="form-group row">
                            <label for="ans" class="col-form-label col-md-6">Your Answer:
                                                                    </label>
                            <div class="col-md-6">
                              <input type="text" class="form-control" name="answer" id="ans" placeholder="Enter your answer" required>
                            </div>
                          </div>

                          <div class="form-group row">
                            <div class="col-md-5 offset-2">
                              <button type="reset" class="btn btn-danger">Reset</button>
                            </div>

                            <div class="col-md-5">
                              <button type="submit" class="btn btn-success" form="regform">Sign Up</button>
                            </div>
                          </div>
                        </form>


                      </div>
                    </div>

我遇到的问题:

1. 如果我在带有空字段的第一个模式中单击登录，它会显示必填字段，但如果我在此之后打开第二个模式，它也会检查必填字段并将字段变为红色。

2. 第二个模态上的提交按钮没有任何作用，我的意思是它不检查所需的字段数据。

PS:我使用的是 bootstrap 4，并且在 head 部分导入了 bootstrap css 和 js，以及 jquery。

Answer 1

您已经在第一个弹出窗口中添加了第二个模式，因此将其分开。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>




<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ModalCenter">
  Log In/ Sign Up
</button>

<div class="modal fade" id="ModalCenter" data-toggle="modal" data-target=".bd-modal-xl" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header text-center">
                <h5 class="modal-title w-100" id="ModalCenterTitle"><b>Login To Your Account</b></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
            </div>
            <div class="modal-body">
                <div class="container-fluid col-md-10 offset-2">
                    <form id="logform" action="Login.php" method="POST">


                        <div class="form-group row">
                            <label for="userid" class="col-form-label col-md-4">User Name: </label>
                            <div class="col-md-6">
                                <input type="text" class="form-control" name="username" id="username" placeholder="User Name" required>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="password" class="col-form-label col-md-4">Password: </label>
                            <div class="col-md-6">
                                <input type="password" class="form-control" name="password" id="password" placeholder="Password" required>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="row">
                                <label class="col-form-label col-md-4" for="course">User Type:</label>
                                <div class="col-md-6">
                                    <select id="course" class="form-control" required>
                    <option value="" selected>Choose any:</option>
                    <option value="student">Student</option>
                    <option value="teacher">Teacher</option>
                    <option value="admin">Admin</option>
                  </select>
                                </div>
                            </div>
                        </div>

                        <div class="form-group row  col-md-6 offset-5">
                            <a href="#"><label class="col-form-label">Forget Password ?</label></a>
                        </div>

                        <div class="form-group row">
                            <div class="col-md-6">
                                <button type="reset" class="btn btn-danger">Reset</button>
                            </div>

                            <div class="col-md-3 offset-1">
                                <button type="submit" class="btn btn-success" form="logform">Log
                  In</button>
                            </div>
                        </div>

                        <br>

                        <div class=" form-group row col-md-8 offset-2">
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ModalScrollable">
                  New User ? Sign Up </button>



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



<div class="modal fade" id="ModalScrollable" tabindex="-1" role="dialog" aria-labelledby="ModalScrollableTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="ModalScrollableTitle">Create a new account
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                          </button>
            </div>
            <div class="modal-body">
                <div class="container-fluid col-md-12">

                    <form id="regform" action="#" method="POST">


                        <br>

                        <div class="form-group row">
                            <label for="fname" class="col-form-label col-md-6">First Name:
                                </label>
                            <div class="col-md-6">
                                <input type="text" class="form-control" name="firstname" id="fname" placeholder="First Name" required>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="lname" class="col-form-label col-md-6">Last Name:
                                </label>
                            <div class="col-md-6">
                                <input type="text" class="form-control" name="lastname" id="lname" placeholder="Last Name" required>
                            </div>
                        </div>


                        <fieldset class="form-group">
                            <div class="row">
                                <label class="col-form-label col-md-6">Gender:</label>

                                <div class="col-md-6">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="gender" id="male" required>
                                        <label class="form-check-label" for="male">Male</label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <input class="form-check-input" type="radio" name="gender" id="female">
                                        <label class="form-check-label" for="female">Female</label>

                                    </div>
                                </div>
                            </div>
                        </fieldset>

                        <div class="form-group">
                            <div class="row">
                                <label class="col-form-label col-md-6" for="course">Course:</label>
                                <div class="col-md-6">
                                    <select id="course" class="form-control" required>
                                      <option value="" selected>Choose from following:
                                      </option>
                                      <option value="bca">BCA</option>
                                      <option value="mca">MCA</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="emid" class="col-form-label col-md-6">Email-ID:
                                </label>
                            <div class="col-md-6">
                                <input type="email" class="form-control" name="email" id="emid" placeholder="Enter your Email-ID" required>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="uname" class="col-form-label col-md-6">New User Name:
                                </label>
                            <div class="col-md-6">
                                <input type="text" class="form-control" name="uname" id="uname" placeholder="Enter a New User Name" required>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="npwd" class="col-form-label col-md-6">New Password:
                                </label>
                            <div class="col-md-6">
                                <input type="password" class="form-control" name="newpassword" id="npwd" placeholder="Enter a New Password" required>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="rpwd" class="col-form-label col-md-6">Retype Password:
                                </label>
                            <div class="col-md-6">
                                <input type="password" class="form-control" name="rtpassword" id="rpwd" placeholder="Retype the password" required>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="row">
                                <label class="col-form-label col-md-6" for="secques">Security Question:</label>
                                <div class="col-md-6">
                                    <select id="secques" class="form-control" required>
                                      <option value="" selected>Choose from following:
                                      </option>
                                      <option value="1">In which city you were born?
                                      </option>
                                      <option value="2">What was your first pet's name?</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="ans" class="col-form-label col-md-6">Your Answer:
                                </label>
                            <div class="col-md-6">
                                <input type="text" class="form-control" name="answer" id="ans" placeholder="Enter your answer" required>
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-md-5 offset-2">
                                <button type="reset" class="btn btn-danger">Reset</button>
                            </div>

                            <div class="col-md-5">
                                <button type="submit" class="btn btn-success" form="regform">Sign Up</button>
                            </div>
                        </div>
                    </form>


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