Validation of my PHP form is not working. Here is the code that i used in my form. The data is storing in DB but validation alone not working. After submitting the form i checked the error console, its simply showing 'Type Error document.getElementById('..')null'. i don't know wht it is and how to fix this error. please help me. I am new in this php field so don't mind my mistakes.
<html>
<body>
<script>
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>
<?php
if(isset($_POST['add_article']))
{
$webcat = addslashes($_POST['halloween_website_directory']);
$webname = $_POST['hallo_art_name'];
$webdesc = $_POST['hallo_art_desc'];
$webkeyword = $_POST['hallo_art_tags'];
$webart = $_POST['msgpost'];
$stripe_name = str_replace(' ','-',$webname);
mysql_query("INSERT INTO halloween_directory_articles (hallo_web_cat,article_title,article_desc,article_body,article_stripe_name,article_tags) values ('".$webcat."','".$webname."','".$webdesc."', '".$webart."','".$stripe_name."','".$webkeyword."');");
$r = mysql_insert_id();
if(!empty($r)){
?>
<p align="center" style="color:#FFFFFF; font-size:20px;"><?php echo "Your Article has been added in our database. we will display it after approval";?></p>
<?php
}
else
{
?>
<p style="color:#FFFFFF;"><?php echo "Article not added please submit again";?></p>
<?php
}
}
?>
</body>
</html>