0

我的 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%">
        &nbsp;&nbsp;&nbsp;<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%">
        &nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<FONT SIZE="-2" FACE="Verdana" color="#FFCC66">&nbsp;Max 300 Characters<BR>
         &nbsp;&nbsp;&nbsp;&nbsp;<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> &nbsp;&nbsp;&nbsp;<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">
    &nbsp;&nbsp;&nbsp;<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>
    &nbsp;&nbsp;&nbsp;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%">
         &nbsp;&nbsp;&nbsp;<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">
                                              &nbsp;&nbsp;&nbsp;<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%">
         &nbsp;&nbsp;&nbsp;<input type="submit" name="add_article" id="add_article" value="Submit Article"/>      
            </td>
        </tr>

</table>
</form>
4

2 回答 2

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";
于 2013-04-08T11:40:52.003 回答
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%">&nbsp;&nbsp;&nbsp;
        <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%">&nbsp;&nbsp;&nbsp;
        <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>&nbsp;&nbsp;&nbsp;<FONT SIZE="-2" FACE="Verdana" color="#FFCC66">&nbsp;Max 300 Characters<BR>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <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> &nbsp;&nbsp;&nbsp;<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"> &nbsp;&nbsp;&nbsp;
          <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> &nbsp;&nbsp;&nbsp;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%">&nbsp;&nbsp;&nbsp;
        <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"> &nbsp;&nbsp;&nbsp;
          <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%">&nbsp;&nbsp;&nbsp;
        <input type="submit" name="add_article" id="add_article" value="Submit Article"/>
      </td>
    </tr>
  </table>
</form>
于 2013-04-08T11:49:53.640 回答