我已经尝试了所有方法，但表单验证 javascript 仍然无法在我的 html 文档中工作。谁能告诉我这里出了什么问题，因为我找不到它。
这是下面显示的 javascript 和 html 代码，表明我做得正确，但它仍然不起作用。
<script type="text/javascript" language="javascript">
function validateForm() {
var fname = document.getElementById("firstname").value;
var lname = document.getElementById("lastname").value;
var month = document.getElementById("month").value;
var day = document.getElementById("day").value;
var year = document.getElementById("year").value;
var bio = document.getElementById("bio").value
if (fname == null || fname == ""){
alert("Firstname not filled out.");
return false;
}
if (lname == null || lname == ""){
alert("Lastname not filled out");
return false;
}
if (month == null || month == ""){
alert("Birthday not filled out");
return false;
}
if (day == null || day == ""){
alert("Birthday not filled out");
return false;
}
if (year == null || year == ""){
alert("Birthday not filled out");
return false;
}
if (bio == null || bio == ""){
alert("About me not filled out");
return false;
}
}
</script>
<form class="form-horizontal" method="POST" action="userinfo" name="update" onsubmit="return validateForm()">
<div class="form-group">
<label class="control-label col-sm-3">First Name:</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="firstname" id="firstname"></input>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Last Name:</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="lastname" id="lastname"></input>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Email:</label>
<div class="col-xs-5">
<input type="email" class="form-control" name="email" id="email"></input>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Sex:</label>
<label class="radio-inline"><input type="radio" name="optradio">Male</label>
<label class="radio-inline"><input type="radio" name="optradio">Female</label>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Status:</label>
<div class="col-xs-4">
<select class="form-control" name="stat">
<option></option>
<option>Single</option>
<option>In a relationship</option>
<option>Married</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Birthday:</label>
<div class="col-xs-3">
<select class="form-control" name="month">
<option></option>
<option>January</option>
<option>Febuary</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
</div>
<div class="col-xs-2">
<select class="form-control" name="day">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
</div>
<div class="col-xs-2">
<select class="form-control" name="year">
<option></option>
<option>2015</option>
<option>2014</option>
<option>2013</option>
<option>2012</option>
<option>2011</option>
<option>2010</option>
<option>2009</option>
<option>2008</option>
<option>2007</option>
<option>2006</option>
<option>2005</option>
<option>2004</option>
<option>2003</option>
<option>2002</option>
<option>2001</option>
<option>2000</option>
<option>1999</option>
<option>1998</option>
<option>1997</option>
<option>1996</option>
<option>1995</option>
<option>1994</option>
<option>1993</option>
<option>1992</option>
<option>1991</option>
<option>1990</option>
<option>1989</option>
<option>1988</option>
<option>1987</option>
<option>1986</option>
<option>1985</option>
<option>1984</option>
<option>1983</option>
<option>1982</option>
<option>1981</option>
<option>1980</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">About Me:</label>
<div class="col-xs-5">
<textarea class="form-control" rows="3" name="bio" id="bio"></textarea><br>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
最佳答案
嗨，你的脚本非常好，但你的 html 应该是这样的 worked demo :更多的提交按钮需要添加id到<select>因为在您的脚本中您恢复了 <select> 的值使用 getElementById
<form class="form-horizontal" method="POST" action="userinfo" name="update" onsubmit="return validateForm()">
<div class="form-group">
<label class="control-label col-sm-3">First Name:</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="firstname" id="firstname"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Last Name:</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="lastname" id="lastname"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Email:</label>
<div class="col-xs-5">
<input type="email" class="form-control" name="email" id="email"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Sex:</label>
<label class="radio-inline"><input type="radio" name="optradio">Male</label>
<label class="radio-inline"><input type="radio" name="optradio">Female</label>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Status:</label>
<div class="col-xs-4">
<select class="form-control" id="stat" name="stat">
<option></option>
<option>Single</option>
<option>In a relationship</option>
<option>Married</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Birthday:</label>
<div class="col-xs-3">
<select class="form-control" id="month" name="month">
<option></option>
<option>January</option>
<option>Febuary</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
</div>
<div class="col-xs-2">
<select class="form-control" id="day" name="day">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
</div>
<div class="col-xs-2">
<select class="form-control" id="year" name="year">
<option></option>
<option>2015</option>
<option>2014</option>
<option>2013</option>
<option>2012</option>
<option>2011</option>
<option>2010</option>
<option>2009</option>
<option>2008</option>
<option>2007</option>
<option>2006</option>
<option>2005</option>
<option>2004</option>
<option>2003</option>
<option>2002</option>
<option>2001</option>
<option>2000</option>
<option>1999</option>
<option>1998</option>
<option>1997</option>
<option>1996</option>
<option>1995</option>
<option>1994</option>
<option>1993</option>
<option>1992</option>
<option>1991</option>
<option>1990</option>
<option>1989</option>
<option>1988</option>
<option>1987</option>
<option>1986</option>
<option>1985</option>
<option>1984</option>
<option>1983</option>
<option>1982</option>
<option>1981</option>
<option>1980</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">About Me:</label>
<div class="col-xs-5">
<textarea class="form-control" rows="3" name="bio" id="bio"></textarea><br>
</div>
</div>
<div class="form-group"></div>
<div class="col-sm-offset-2 col-sm-10"></div>
<div class="col-sm-offset-2 col-sm-10"><input type="submit"/></div>
</form>
关于html中的javascript无法进行表单验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34218054/