HTML5'required'不能使用提交按鈕

當required被添加到標籤中時，表單不會提交，但是當它被移除時，它將起作用。爲什麼會發生這種情況，是否有修復？謝謝。HTML5'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="[email protected]"> 
     </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>

來源

2015-06-12 Adegoke A

'required'用於驗證，如果'required'元素爲空，則不會提交表單。請提供詳細信息，如果表單不符合預期，您的表單在什麼情況下不會提交。 –

@SpencerWieczorek是的，我知道。我在提交之前填寫了表格的所有必填部分，但仍然不起作用。 –

不工作如何？他們是否來自'required'字段？ –

如果你看一下控制檯，您應該收到以下錯誤信息：

與name =「月」無效表單控件不可作爲焦點。

發生這種情況是因爲您有一個元素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;"或在提交時顯示。

來源

2015-06-12 00:44:27

HTML5'required'不能使用提交按鈕

回答

相關問題