我正在通过单击按钮实现登录表单。 然后在该第一登录表单模式中，我想使用第一模式中的按钮打开另一个模式。
<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">×</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">×</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>
<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>
我面临的问题：
如果我在带有空字段的第一个模式中单击登录，它会显示必填字段为必填字段，但是如果我在此之后打开第二个模式，则它也在检查必填字段并将字段变为红色。
第二个模式上的“提交”按钮没有任何作用，我的意思是它不检查所需的字段数据。
PS：我正在使用引导程序4，并且在开头部分导入了引导程序css和js以及jquery。
答案 0 :(得分：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">×</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">×</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>
<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>