Javascript Validation

I made some changes, but still very confused about a few things since this is my first time validating a form using php. So, I am not very sure if I am doing things right this time around. :confused:

My error console also tells me that there is an error on line 43 char 1 (Object expected).



<!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=utf-8" />
<title>Contact</title>
<link href="style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
function ValidateContactForm()
{
if (document.getElementById("message").value === "") 
{
	window.alert("Please provide a detailed description or comment.");
	document.getElementById("message").focus();
	}
if (document.getElementById("author").value === "")
{
	window.alert("Please provide your name.");
	document.getElementById("author").focus();
}
if (document.getElementById("verif_box").value === "")
{
	window.alert("Please enter captcha code.");
	document.getElementById("verif_box").focus();
}  
function checkEmail() 
{
var email = document.getElementById("email");
var filter = /^([a-zA-Z0-9_\\.\\-])+\\@(([a-zA-Z0-9\\-])+\\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(email.value)) 
{
alert('Please provide a valid email address');
email.focus;
}
return true; // successful
  }
  return false; // failed validation
}
</script>
</head>
<body onload="startform()">

<div id="templatemo_wrapper"> 

	<div id="templatemo_header">

 
        
        <ul id="social_box">
                    <li><a href="http://www.facebook.com/"><img 

src="http://www.sitepoint.com/forums/images/facebook.png" alt="facebook" /></a></li>
            <li><a href="http://www.twitter.com/"><img src="http://www.sitepoint.com/forums/images/twitter.png" 

alt="twitter" /></a></li>              
        </ul>
        
      	<div id="site_title">
            <h1><a href="index.htm"><img src="http://www.sitepoint.com/forums/images/logo2.png" alt="logo" 

/><span></span></a></h1>
        </div> <!-- end of site_title -->
        
      


<!-- end of templatemo_menu -->
    
    <div id="templatemo_content_wrapper">
    	<div id="templatemo_content_top"></div>
        <div id="templatemo_content">
        
            <h2>Contact</h2>



<p><b>E-mail: myemailaddress@gmail.com </b></p>

<p><b><a href="http://www.twitter.com/">Twitter</a></b></p>
        
            <div class="cleaner_h50"></div>
            
            	<div id="contact_form">
            
                    <h4>Quick Contact</h4>
                    
                    <form method="post" name="contact" id="contact" action="email.php" 

onsubmit="return ValidateContactForm() && checkEmail();" onset="location.reload()">
                        
                        <div class="col_w340 float_l">
                        
                            <label for="author">Name (* Required):</label> <input 

name="author" type="text" class="input_field" id="author" maxlength="40" />
                          	<div class="cleaner_h10"></div>

 <label for="subject">Subject:</label> <input name="subject" type="text" class="input_field" 

id="subject" maxlength="40" />
                          	<div class="cleaner_h10"></div>

                            
                            <label for="email">Email (* Required):</label> <input 

name="email" type="text" class="input_field" id="email" maxlength="40" />
                          	<div class="cleaner_h10"></div>
                            
                            
Type verification image:<br />
<input name="verif_box" type="text" id="verif_box" style="padding:2px; border:1px solid 

#CCCCCC; width:180px; height:14px;font-family:Verdana, Arial, Helvetica, sans-serif; 

font-size:11px;"/>
<img src="verificationimage.php?<?php echo rand(0,9999);?>" alt="verification image, type it 

in the box" width="50" height="24" align="absbottom" /><br />
<br />                        

</div>
                        


                        <div class="col_w340 float_r">
                        
                            <label for="message">Message (*Required):</label> <textarea 

id="message" name="message" rows="0" cols="0" class="required"></textarea>
                            <div class="cleaner_h10"></div>
                            
                            <input type="submit" class="submit_btn float_l" name="submit" 

id="submit" value="Send" />
                            <input type="reset" class="submit_btn float_r" name="reset" 

id="reset" value="Reset" />
                            
                        </div>
                        
                   </form>

            </div> 

            <div class="cleaner"></div>
            
        </div>
        <div id="templatemo_content_bottom"></div>
	</div>
    
    <div id="templatemo_sp_box">
    
    	<div class="col_w340 float_l">
         
			</div>
        </div>
        
        <div class="col_w340 float_r">
        
			</div>
        </div>
    
    </div>
    
    <div id="templatemo_footer">

      
        Copyright © 2011 <a href="www.twitter.com/">Starr</a><br/> 
        <a href="http://www.iwebsitetemplate.com" target="_parent">Website Templates</a> 
        by <a href="http://www.templatemo.com" target="_parent">Free CSS Templates</a>
    
    </div> <!-- end of templatemo_footer -->
    
</div> <!-- end of templatemo_wrapper -->    

</body>
</html>





<!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=utf-8" />
<title>Contact</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>


<?php

//First you need to make sure the form is sent and everything is there.
if($_SERVER['REQUEST_METHOD'] == 'POST'){
    //Was everything sent? (it should have been, even empty fields)
    if(!isset($_POST['name'], $_POST['email'], $_POST['subject'], $_POST['message'])){
        echo '<b>Form error</b> - Not everything was sent in the form.';
    }else{
        //Set the variables to the form values
        $first_name=$_POST['name'];
        $email_address=$_POST['email'];
        $subject=$_POST['subject'];
        $message=$_POST['message'];
        /*
         * If their lengths are zero, output an error.
         * 
         * There are better, cleaner ways of going through
         * each one, but I'm guessing PHP isn't a strength
         * and therefore it's better to be simple with the code.
         * 
         */
        if(strlen($first_name) == 0){
            echo '<p><b>Empty Field</b> - Please provide your first Name</p>';
        }else if(strlen($email_address) == 0){
            echo '<p><b>Empty Field</b> - Please provide your email Address</p>';
        }else if(strlen($subject) == 0){
            echo '<p><b>Empty Field</b> -Please provide a subject</p>';
        }else if(strlen($message) == 0){
            echo '<p><b>Empty Field</b> -Please provide your message</p>';
        }else{
            $Sent = mail("myemailaddress@gmail.com","Subject: {$subject}", $message, "From: 

$first_name <{$email_address}>");
            if($Sent){
                echo 'Success! :D';
            }else{
                echo 'Please make sure that all fields are filled out';
            }
        }
    }
}
?> 



</body>
</html>




I am starting to understand it a little better now. And your right, php is not my strongest point. I’ve always validated my forms using Javascript. I went ahead and got rid of my Javascript and added your suggested php validation to my php page. Everything works, but when I actually try to send an email, I still the get error to check my html. And how would I add an error message saying something like “Please provide your name” etc.



<!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=utf-8" />
<title>Contact</title>
<link href="style.css" rel="stylesheet" type="text/css" />


</head>
<body>

<div id="templatemo_wrapper"> 

	<div id="templatemo_header">

 
        
        <ul id="social_box">
                    <li><a href="http://www.facebook.com/"><img src="images/facebook.png" alt="facebook" /></a></li>
            <li><a href="http://www.twitter.com/"><img src="images/twitter.png" alt="twitter" /></a></li>              
        </ul>
        
      	<div id="site_title">
            <h1><a href="index.htm"><img src="images/logo2.png" alt="logo" /><span></span></a></h1>
        </div> <!-- end of site_title -->
        
      
    </div> <!-- end of templatemo_header -->
    

<!-- end of templatemo_menu -->
    
    <div id="templatemo_content_wrapper">
    	<div id="templatemo_content_top"></div>
        <div id="templatemo_content">
        
            <h2>Contact</h2>



<p><b>E-mail: myemailaddress@gmail.com </b></p>

<p><b><a href="http://www.twitter.com/">Twitter</a></b></p>
        
            <div class="cleaner_h50"></div>
            
            	<div id="contact_form">
            
                    <h4>Quick Contact</h4>
                    
                    <form method="post" name="contact" id="contact" action="email.php">
                        
                        <div class="col_w340 float_l">
                        
                            <label for="name">Name (* Required):</label> <input name="name" type="text" class="input_field" id="name" maxlength="40" />
                          	<div class="cleaner_h10"></div>

 <label for="subject">Subject:</label> <input name="subject" type="text" class="input_field" id="subject" maxlength="40" />
                          	<div class="cleaner_h10"></div>

                            
                            <label for="email">Email (* Required):</label> <input name="email" type="text" class="input_field" id="email" maxlength="40" />
                          	<div class="cleaner_h10"></div>
                            
                            
Type verification image:<br />
<input name="verif_box" type="text" id="verif_box" style="padding:2px; border:1px solid #CCCCCC; width:180px; height:14px;font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px;"/>
<img src="verificationimage.php?<?php echo rand(0,9999);?>" alt="verification image, type it in the box" width="50" height="24" align="absbottom" /><br />
<br />                        

</div>
                        


                        <div class="col_w340 float_r">
                        
                            <label for="text">Message (*Required):</label> <textarea id="text" name="text" rows="0" cols="0" class="required"></textarea>
                            <div class="cleaner_h10"></div>
                            
                            <input type="submit" class="submit_btn float_l" name="submit" id="submit" value="Send" />
                            <input type="reset" class="submit_btn float_r" name="reset" id="reset" value="Reset" />
                            
                        </div>
                        
                   </form>

            </div> 

            <div class="cleaner"></div>
            
        </div>
        <div id="templatemo_content_bottom"></div>
	</div>
    
    <div id="templatemo_sp_box">
    
    	<div class="col_w340 float_l">
         
			</div>
        </div>
        
        <div class="col_w340 float_r">
        
			</div>
        </div>
    
    </div>
    
    <div id="templatemo_footer">

      
        Copyright © 2011 <a href="www.twitter.com/"></a><br/> 
        <a href="http://www.iwebsitetemplate.com" target="_parent">Website Templates</a> 
        by <a href="http://www.templatemo.com" target="_parent">Free CSS Templates</a>
    
    </div> <!-- end of templatemo_footer -->
    
</div> <!-- end of templatemo_wrapper -->    

</body>
</html>


webdev1958 You are right of course but I’m in the same situation and even though the the third if statement has return false and the final else statement has return true the message still gets posted when the errors occur. There must be a way to access the form action or post value to stop it from posting period! I have this html:
HTML


<form id="contact" name="contact" action="mailto:heinzstapff@hotmail.com" method="post">

PROPOSED SCRIPT


function check(){
var action=document.getElementById('contact').action.value;//never used before
if(dog.value==' '){
//jump up and down
action=' ';//never tried before
}
else{
action="mailto:heinzstapff@hotmail.com" ;//never tried before
}}

The mailto is just for testing!