HTML中的javascript无法正常使用表单验证
[英]javascript in html not working form validation
问题描述
I've tried everything and the form validation javascript still is not working inside my html document. 
我已经尝试了所有方法，但表单验证javascript仍无法在我的html文档中运行。 Can anyone one tell me what is wrong here because i can not find it. 谁能告诉我这是怎么回事，因为我找不到它。
Here is the javascript and html code shown below to show that i am doing it correctly but it still is not working. 这是下面显示的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">
2 个解决方案
解决方案1
2 2015-12-11 07:29:04
hi your script is very good, but your html should be something like this worked demo : more of the submit button you need to add the id to the <select> because in your scripts you recovered the values of <select> with getElementById 您好，您的脚本非常好，但是您的html应该像这样的演示示例 ：更多的提交按钮需要将id添加到<select>因为在脚本中，您使用getElementById恢复了<select>的值
<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>
解决方案2
1 2015-12-11 07:31:51
All your html select set the wrong property Try: 您所有的html select设置错误的属性尝试：
<select class="form-control" name="month">
set to :
<select class="form-control" id="month">
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Javascript验证表单不适用于HTML - Javascript validation form not working with HTML
具有html表单验证的Javascript不起作用 - Javascript with html form validation not working
HTML表单的Java验证无效 - Javascript validation for html form not working
HTML-Javascript表单验证不起作用 - Html-Javascript form Validation not working
HTML5表单验证的Javascript代码不起作用 - Javascript Code For HTML5 Form Validation Not Working
为什么 Javascript 验证在 html 表单中不起作用？ - Why Javascript validation is not working in html form?
JavaScript表单验证不适用于所有HTML字段 - JavaScript form validation not working on all HTML fields
Javascript验证不适用于html注册表单 - Javascript validation is not working in html registration form
JavaScript-HTML表单验证不起作用 - JavaScript-HTML form validation not working
HTML 和 Javascript 空表单验证不起作用 - HTML and Javascript empty form validation is not working
相关标签