Form Validation

music_fan01 · September 4, 2011

I just got my form working properly, but now I want to add some form validation for it. I would like to validate the name, email address, and textarea. So, I got it started, but I am stuck and not too sure what to do next or where to go.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Contact</title>

</head>

<body>

<?php

$first_name=$_POST['name'];

$email_address=$_POST['email'];

$subject=$_POST['subject'];

$message=$_POST['text'];

mail("[email protected]","Subject: $subject",

$message, "From: $first_name <$email_address>");

echo "Thank you for using our mail form.<br/>";

echo "Your email has been sent.";

?>

</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" />

<script type="text/javascript">
function validateForm()
{
var x=document.forms["contact"]["name"].value;
if (x==null || x=="")
  {
  alert("First name must be filled out");
  return false;
  }
}
</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="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 -->
    
<div id="templatemo_menu">
    	<div class="home"><a href="index.htm"></a></div>
        <ul>
          <li><a href="index.htm"><span>Home</span></a></li>
            <li><a href="test.htm"><span>Test</span></a></li>
            <li><a href="examples.htm"><span>Example</span></a></li>
            <li><a href="sample.htm"><span>Sample</span></a></li>
    <li><a href="contact.htm"><span>Contact</span></a></li>
            <li><a href="comments.htm">Have A Comment?<span>Comments</span></a></li>
        </ul>    	
    </div> 

<!-- 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: [email protected] </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 checkform1()" onset="location.reload()">
                        
                        <div class="col_w340 float_l">
                        
                            <label for="name">Name (* Required):</label> <input name="name" 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="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/">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>

Sign In

Form Validation

Recommended Posts

music_fan01

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information