当required添加到代码时，表单不会提交，但删除后，它会起作用。为什么会发生这种情况并且有解决方法？感谢。
<form class="form-horizontal" role="form" action="insert.php" method="post" autocomplete="on" style="">
<div class="form-group">
<label class="control-label col-sm-2" for="fname">Firstname*:</label>
<div class="col-sm-4">
<input type="text" name="fname" class="form-control" required>
</div>
<label class="control-label col-sm-1" for="lname">Surname*:</label>
<div class="col-sm-5">
<input type="text" name="lname" class="form-control" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Gender*:</label>
<div class="col-sm-3">
<select name="gender" class="form-control" required>
<option value="" disabled selected>-- Please select --</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<label class="control-label col-sm-2">Age Group*:</label>
<div class="col-sm-2">
<select name="age_group" id="age_group" class="form-control" required>
<option value="" disabled selected>-- Please select --</option>
<option value="child">Child (0 - 12)</option>
<option value="youth" >Youth (13 - 17)</option>
<option value="adult">Adult (18 - 49)</option>
<option value="elder">Elder ( 50+ )</option>
</select>
</div>
<label class="control-label col-sm-1">Status:</label>
<div class="col-sm-2">
<select name="status" id="status" class="form-control">
<option value="">-- Please select --</option>
<option value="single">Single</option>
<option value="single_parent" >Single Parent</option>
<option value="married">Married</option>
<option value="divorced">Divorced</option>
<option value="widowed">Widowed</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">D.O.B.*:</label>
<div class="col-sm-5">
<select name="day" class="form-control" required>
<option value="" disabled selected>-- Day --</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="col-sm-5">
<select name="month" class="form-control" required>
<option value="" disabled selected>-- Month --</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
</div>
<div class="form-group" id="wed_anni" style="display:none;">
<label class="control-label col-sm-2">Wedding Anniversary:</label>
<div class="col-sm-5">
<select name="day" class="form-control" >
<option value="" disabled selected>-- Please select --</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="col-sm-5">
<select name="month" class="form-control" required>
<option value="" disabled selected>-- Please select --</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Type*:</label>
<div class="col-sm-4">
<select name="type" class="form-control" required>
<option value="" disabled selected>-- Please Select --</option>
<option value="member">Member</option>
<option value="worker">Worker</option>
<option value="hod">H.O.D.</option>
<option value="minister">Minister</option>
<option value="ord_minister">Ordained Minister</option>
<option value="asst_pastor">Asst. Pastor</option>
<option value="pastor">Pastor</option>
</select>
</div>
<label class="control-label col-sm-1">Email:</label>
<div class="col-sm-5">
<input type="email" class="form-control" name="email" placeholder="johnsmith@yahoo.com">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Address:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="address" placeholder="16 Fortlawn Avenue">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="text" class="form-control" name="city" placeholder="Mulhuddart">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="text" class="form-control" name="zipco" placeholder="Dublin 15">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="contact1">Contact Num 1:</label>
<div class="col-sm-4">
<input type="text" name="contact1" class="form-control">
</div>
<label class="control-label col-sm-2" for="contact2">Contact Num 2:</label>
<div class="col-sm-4">
<input type="text" name="contact2" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-md-10">
<button value=" Send" class="btn btn-primary" type="submit" id="submit">Submit</button>
</div>
</div>
</form>
答案 0 :(得分：3)
如果您查看控制台，则应收到以下错误消息：
name ='month'的无效表单控件无法调焦。
这是因为您有一个required的元素，但是以某种方式被隐藏导致验证陷入困境。在这种情况下，问题出在这里：
<div class="form-group" id="wed_anni" style="display:none;">
...
<select name="month" class="form-control" required>
....
</div>
外部<select>隐藏<div>。这导致了问题。一种解决方案是从该字段中删除required。另一种方法是删除style="display:none;"或在提交时显示。