验证我的PHP表单无效。这是我在表单中使用的代码。数据存储在DB中，但仅凭验证无效。提交表单后，我检查了错误控制台，它只显示Type Error document.getElementById('..')null。
我不知道它是什么以及如何解决此错误。我是这个php领域的新手，所以不要介意我的错误。
这是我的代码：
<script type="text/javascript">
function art_category()
{
document.getElementById('halloween_website_directory1').style.display = "none";
document.getElementById('hallo_web_name1').style.display = "none";
document.getElementById('hallo_web_desc1').style.display = "none";
document.getElementById('hallo_web_tags1').style.display = "none";
document.getElementById('msgpost1').style.display = "none";
if(document.getElementById('halloween_website_directory').value=="")
{
document.getElementById('halloween_website_directory1').style.display = "block";
return false;
}
else if(document.getElementById('hallo_art_name').value=="")
{
document.getElementById('hallo_art_name1').style.display = "block";
return false;
}
else if(document.getElementById('hallo_art_desc').value=="")
{
document.getElementById('hallo_art_desc1').style.display = "block";
return false;
}
else if(document.getElementById('hallo_art_tags').value=="")
{
document.getElementById('hallo_art_tags1').style.display = "block";
return false;
}
else if(document.getElementById('msgpost').value=="")
{
document.getElementById('msgpost1').style.display = "block";
return false;
}
else {
document.artcategory.submit();
return true;
}
}
</script>
<form name="artcategory" id="artcategory" method="post" enctype="multipart/form-data" onSubmit="return art_category();">
<table align="center" width="69%" height="75%" border="0" bordercolor="#663300";>
<tr style="width:60px; height:60px;">
<td width="33%" height="60%" style="color:#FFFFFF;"><p align="center"><FONT SIZE="-1" FACE="Verdana">Select Category:<span style="color:#FF0000;">*</span></FONT></p>
</td>
<td width="67%" height="60%">
<select name="halloween_website_directory" id="halloween_website_directory">
<option value="">Select Website Category</option>
<?PHP
$web_cat = mysql_query("SELECT * FROM halloween_website_directory ORDER BY web_cat_name;");
while($cat = mysql_fetch_array($web_cat))
{
?>
<option value="<?PHP echo $cat['web_cat_id'] ?>"><?PHP echo $cat['web_cat_name'] ?></option>
<?PHP } ?>
</select>
<span id="halloween_website_directory1" style="color:#FF0000; display:none;">* Select Category</span>
</td>
</tr>
<tr style="width:60px; height:60px;">
<td width="33%" height="60%" style="color:#FFFFFF;"><p align="center"><FONT SIZE="-1" FACE="Verdana">Article Title:<span style="color:#FF0000;">*</span></FONT></p>
</td>
<td width="67%" height="60%">
<input type="text" name="hallo_art_name" id="hallo_art_name"/>
<span id="hallo_art_name1" style="color:#FF0000; display:none;">* Please enter the title of your Article</span>
</td>
</tr>
<tr style="width:60px; height:60px;">
<TD align="center" WIDTH="33%" style="color:#FFFFFF;"><P><FONT SIZE="-1" FACE="Verdana">Article Description:<span style="color:#FF0000;">*</span></FONT></P>
</TD>
<TD WIDTH="68%"><P> <FONT SIZE="-2" FACE="Verdana" color="#FFCC66"> Max 300 Characters<BR>
<TEXTAREA NAME="hallo_art_desc" id="hallo_art_desc" ROWS=5 COLS=33 WRAP="virtual"></TEXTAREA>
<span id="hallo_art_desc1" style="color:#FF0000; display:none;">* Enter Description</span>
<BR>
</FONT> <FONT SIZE="-2" FACE="Verdana" COLOR="#FFCC66"> Do not use "See web site" as
your description.</FONT></P>
</TD>
</TR>
<tr style="width:60px; height:60px;">
<td width="33%" height="60%" style="color:#FFFFFF;"><p align="center"><FONT SIZE="-1" FACE="Verdana">Article tags:<span style="color:#FF0000;">*</span></FONT></p>
</td>
<TD WIDTH="68%"><P><FONT SIZE="-1" FACE="Verdana" color="#FFFFFF">
<input type="text" name="hallo_art_tags" id="hallo_art_tags" value="" size=30>
<span id="hallo_art_tags1" style="color:#FF0000; display:none;">* Article Tags</span>
</FONT><FONT SIZE="-2" FACE="Verdana" color="#FFCC66"><br>
<font>
Use a comma to separate each
keyword.</font><BR>
</FONT></P>
</TD>
</tr>
<tr style="width:60px; height:60px;">
<td width="33%" height="60%" style="color:#FFFFFF;"><p align="center"><FONT SIZE="-1" FACE="Verdana">Article Body:<span style="color:#FF0000;">*</span></FONT></p>
</td>
<td width="67%" height="60%">
<textarea name="msgpost" id="msgpost" rows="10"/></textarea>
<span id="msgpost1" style="color:#FF0000; display:none;">* Enter the Article content</span>
</td>
</tr>
<tr style="width:60px; height:60px;">
<td width="33%" height="60%" style="color:#FFFFFF;"><p align="center"><FONT SIZE="-1" FACE="Verdana">Agree
to our Submission
Policy</font></p></Td>
<TD WIDTH="68%"><P><FONT SIZE="-2" FACE="Verdana">
<INPUT TYPE="checkbox" NAME="policy" VALUE="Y" CHECKED>
</FONT></P></TD>
</TR>
<tr style="width:60px; height:60px;">
<td align="center" colspan="3" width="67%" height="60%">
<input type="submit" name="add_article" id="add_article" value="Submit Article"/>
</td>
</tr>
</table>
</form>
答案 0 :(得分：2)
您的脚本中有许多元素在HTML中不存在。例如，hallo_web_name1，hallo_art_name，hallo_web_desc1等，这就是原因，您收到此错误。
如果基于某些条件在HTML代码中显示这些元素，请先检查它们是否存在，如果是，则按以下方式获取其值
if (document.getElementById('hallo_web_name1'))
document.getElementById('hallo_web_name1').style.display = "none";
答案 1 :(得分：1)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>Untitled Document</title>
<script>
function art_category()
{
document.getElementById('halloween_website_directory1').style.display = "none";
document.getElementById('hallo_art_name1').style.display = "none";
document.getElementById('hallo_art_desc1').style.display = "none";
document.getElementById('hallo_art_tags1').style.display = "none";
document.getElementById('msgpost1').style.display = "none";
document.getElementById('chkbox').style.display = "none";
if(document.getElementById('halloween_website_directory').value==""){
document.getElementById('halloween_website_directory1').style.display = "block";
return false;
}
if(document.getElementById('hallo_art_name').value==""){
document.getElementById('hallo_art_name1').style.display = "block";
return false;
}
if(document.getElementById('hallo_art_desc').value==""){
document.getElementById('hallo_art_name1').style.display = "none";
document.getElementById('hallo_art_desc1').style.display = "block";
return false;
}
if(document.getElementById('hallo_art_tags').value==""){
document.getElementById('hallo_art_name1').style.display = "none";
document.getElementById('hallo_art_desc1').style.display = "none";
document.getElementById('hallo_art_tags1').style.display = "block";
return false;
}
if(document.getElementById('msgpost').value==""){
document.getElementById('hallo_art_name1').style.display = "none";
document.getElementById('hallo_art_desc1').style.display = "none";
document.getElementById('hallo_art_tags1').style.display = "none";
document.getElementById('msgpost1').style.display = "block";
return false;
}
if(document.getElementById('policy').checked == false){
document.getElementById('hallo_art_name1').style.display = "none";
document.getElementById('hallo_art_desc1').style.display = "none";
document.getElementById('hallo_art_tags1').style.display = "none";
document.getElementById('msgpost1').style.display = "none";
document.getElementById('chkbox').style.display = "block";
return false;
}
}
</script>
</head>
<body>
<form name="artcategory" id="artcategory" method="post" enctype="multipart/form-data" onSubmit="return art_category();">
<table align="center" width="69%" height="75%" border="0" bordercolor="#663300";>
<tr style="width:60px; height:60px;">
<td width="33%" height="60%" style="color:#FFFFFF;"><p align="center"><FONT SIZE="-1" FACE="Verdana">Select Category:<span style="color:#FF0000;">*</span></FONT></p></td>
<td width="67%" height="60%">
<select name="halloween_website_directory" id="halloween_website_directory">
<option value="">Select Website Category</option>
<?PHP $web_cat = mysql_query("SELECT * FROM halloween_website_directory ORDER BY web_cat_name;");
while($cat = mysql_fetch_array($web_cat)){
?>
<option value="<?PHP echo $cat['web_cat_id'] ?>"><?PHP echo $cat['web_cat_name'] ?></option>
<?PHP } ?>
</select>
<span id="halloween_website_directory1" style="color:#FF0000; display:none;">* Select Category</span> </td>
</tr>
<tr style="width:60px; height:60px;">
<td width="33%" height="60%" style="color:#FFFFFF;"><p align="center"><FONT SIZE="-1" FACE="Verdana">Article Title:<span style="color:#FF0000;">*</span></FONT></p></td>
<td width="67%" height="60%">
<input type="text" name="hallo_art_name" id="hallo_art_name"/>
<span id="hallo_art_name1" style="color:#FF0000; display:none;">* Please enter the title of your Article</span> </td>
</tr>
<tr style="width:60px; height:60px;">
<TD align="center" WIDTH="33%" style="color:#FFFFFF;"><P><FONT SIZE="-1" FACE="Verdana">Article Description:<span style="color:#FF0000;">*</span></FONT></P></TD>
<TD WIDTH="68%"><P> <FONT SIZE="-2" FACE="Verdana" color="#FFCC66"> Max 300 Characters<BR>
<TEXTAREA NAME="hallo_art_desc" id="hallo_art_desc" ROWS=5 COLS=33 WRAP="virtual"></TEXTAREA>
<span id="hallo_art_desc1" style="color:#FF0000; display:none;">* Enter Description</span> <BR>
</FONT> <FONT SIZE="-2" FACE="Verdana" COLOR="#FFCC66"> Do not use "See web site" as
your description.</FONT></P></TD>
</TR>
<tr style="width:60px; height:60px;">
<td width="33%" height="60%" style="color:#FFFFFF;"><p align="center"><FONT SIZE="-1" FACE="Verdana">Article tags:<span style="color:#FF0000;">*</span></FONT></p></td>
<TD WIDTH="68%"><P><FONT SIZE="-1" FACE="Verdana" color="#FFFFFF">
<input type="text" name="hallo_art_tags" id="hallo_art_tags" value="" size=30>
<span id="hallo_art_tags1" style="color:#FF0000; display:none;">* Article Tags</span> </FONT><FONT SIZE="-2" FACE="Verdana" color="#FFCC66"><br>
<font> Use a comma to separate each
keyword.</font><BR>
</FONT></P></TD>
</tr>
<tr style="width:60px; height:60px;">
<td width="33%" height="60%" style="color:#FFFFFF;"><p align="center"><FONT SIZE="-1" FACE="Verdana">Article Body:<span style="color:#FF0000;">*</span></FONT></p></td>
<td width="67%" height="60%">
<textarea name="msgpost" id="msgpost" rows="10"/></textarea>
<span id="msgpost1" style="color:#FF0000; display:none;">* Enter the Article content</span> </td>
</tr>
<tr style="width:60px; height:60px;">
<td width="33%" height="60%" style="color:#FFFFFF;"><p align="center"><FONT SIZE="-1" FACE="Verdana">Agree
to our Submission
Policy</font></p></Td>
<TD WIDTH="68%"><P><FONT SIZE="-2" FACE="Verdana">
<INPUT TYPE="checkbox" NAME="policy" id="policy" VALUE="Y" />
</FONT></P>
<span id="chkbox" style="color:#FF0000; display:none;">* Please check policy</span>
</TD>
</TR>
<tr style="width:60px; height:60px;">
<td align="center" colspan="3" width="67%" height="60%">
<input type="submit" name="add_article" id="add_article" value="Submit Article"/>
</td>
</tr>
</table>
</form>