Javascript form validation for a referrenced php form handler file

Chubichan · December 30, 2008

I have been up all night searching and perusing the internet for an answer to this situation. I need form validation on this form located here.

http://www.drmdoyle.com/contact.php

Right now you can submit the form and I receive an email with the corresponding data included. However, if no data was entered I just get a blank form, so I need validation. I am using php to process the form with the file "process.php." You can see where I have done that in my form markup. I am including the contact form file, the process.php file, the "your form has been submitted" file, and the javascript that I have in order to validate this form. I am not getting the validation to take and I am afraid that I am placing it in the wrong place all together. Some insight from the php gods on this forum would be greatly appreciated.

Contact form

<!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>Dr. Michael D. Doyle | Contact</title>

<LINK REL=StyleSheet HREF="contact.css" TYPE="text/css" />
<LINK REL=StyleSheet HREF="includes_css/nav_bar.css" TYPE="text/css" />
<LINK REL=StyleSheet HREF="includes_css/footer.css" TYPE="text/css" />
<LINK REL=StyleSheet HREF="includes_css/top2.css" TYPE="text/css" />
<script defer type="text/javascript" src="pngfix.js"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>
    
<div id="container">

        <?php require_once ("includes/top2.php");?>
        <?php include ('includes/nav_bar.php'); ?>
         	
           		<h3>Contact Our Office</h3>
                   <p> 	Dr Doyle and staff want to make it very easy to get in touch with one another. That is the reason we have implemented this online contact form.	All fields in this form are required. This is form is intended for simple questions or comments. This form is not internded for medical emergencies. If you are experiencing such an emergency please call our office at (478) 971-1228 immediately.</p>
                   
                   	<h4>Dr. Michael M. Doyle D.D.S.<br />	
  						600 Professional Drive<br />
					Warner Robins, GA 31088<br />
                        (478) 971-1228
  					</h4>
                    
               
                    
					<form action="process.php" method="post">
                	<div><label for="name">Name:</label><input name="name" type="text" id="username" size="30" /></div>
                	<div><label for="email">Email:</label><input name="email" type="text" id="email" size="30" /></div>
                    <div><label for="phone">Phone:</label><input name="phone" type="text" id="phone" size="30" /></div>
               	 	<div><label for="subj">Subject:</label><input name="subj" type="text" id="subj" size="30" /></div>
                    <div><label for="mess">Message:</label><textarea name="mess" rows="5" cols="26"> </textarea></div>                    
                    <div class="actions"><input type="submit" input name="submit" value="Submit" class="submit"/></div>
                    </form>
        <?php include ('includes/footer.php'); ?>   
</div>
</body>
</html>

process.php

<?php
if(isset($_POST['submit'])) {

$to  =  "chubichan@gmail.com"; 
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$subj = $_POST['subj'];
$mess = $_POST['mess'];

$body = "From: $name\n E-Mail: $email\n Telephone Number: $phone\n Message: $mess\n ";

mail($to, "Dr. M. Doyle Website Contact Form Submition", $subj, $body);
header("location:contact_confirm.php");

} else {

echo "Did not send.";

}
?>

"Your form has been submitted" page (contact_confirm.php)

<!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>Dr. Michael D. Doyle | Contact</title>

<LINK REL=StyleSheet HREF="contact.css" TYPE="text/css" />
<LINK REL=StyleSheet HREF="includes_css/nav_bar.css" TYPE="text/css" />
<LINK REL=StyleSheet HREF="includes_css/footer.css" TYPE="text/css" />
<LINK REL=StyleSheet HREF="includes_css/top2.css" TYPE="text/css" />
<script defer type="text/javascript" src="pngfix.js"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

</head>

<body>
    
<div id="container">
<?php include ('includes/top2.php'); ?>
    <?php include ('includes/nav_bar.php'); ?>
  
           		<h3>Contact Our Office</h3>
                   <p> 	Thank you for submitting your form. One of our representavitves will call or email you back shortly. You are very important to us all at Dr. Doyle's office. We will get back to you as soon as adequate time is available. If this is an emergency, please call at (478) 971-1228.</p>
                   
                   	<h4>Dr. Michael M. Doyle D.D.S.<br />	
  						600 Professional Drive<br />
					Warner Robins, GA 31088<br />
                        (478) 971-1228
  					</h4>
                    
					<h1>Your form has been submitted.</h1>
    
    <?php include ('includes/footer.php'); ?>
    
</div>

</body>
</html>

...and finally the javascript to validate the form. Where do I put this lad?

<script language="JavaScript" type="text/javascript">
<!--
function checkform ( form )
{
  // see http://www.thesitewizard.com/archive/validation.shtml
  // for an explanation of this script and how to use it on your
  // own website

  // ** START **
  if (form.name.value == "") {
    alert( "Please enter your name." );
    form.name.focus();
    return false ;
  }

if (form.email.value == "") {
    alert( "Please enter your email address." );
    form.email.focus();
    return false ;
  }

if (form.phone.value == "") {
    alert( "Please enter your telephone number." );
    form.phone.focus();
    return false ;
  }

if (form.subj.value == "") {
    alert( "Please enter a subject for this form." );
    form.subj.focus();
    return false ;
  }

if (form.mess.value == "") {
    alert( "You forgot to enter a message!" );
    form.mess.focus();
    return false ;
  }
  // ** END **
  return true ;
}
//-->
</script>

btherl · December 30, 2008

That lad should be up between the head tags, but it should work anywhere. What code are you using to call the form validation from the submit button?

chronister · December 30, 2008

The javascript part needs to be in the head of the page. It is a function, so you will need to call it with an onSubmit in the form opening tag, or an onClick on the button. I am not good with Javascript, so I don't know which is better.

As far as the PHP validation, do something like this... add inside the

if(isset($_POST['submit']))

<?php

if(!empty($_POST['name'])
{
  $name = $_POST['name'];
}
else
{
  $error['name'] = 'Please enter your name';
}

// do the same for the other form elements substituting the name and message.

?>

Then above the form do this.

<?php

if(is_array($error))
{
foreach($error as $key=>$message)
{
    echo $message.'<br>';  
}
}
?>
<form action="process.php" method="post">

The messages will appear above the form. By using a key as the name, you can also use a function to reference the name of the field and do things like fill in the value they entered so they don't have to fill the form out all over again, you can highlight the fields that are in error state with some css.

If you want more info on those items, lemme know and I will elaborate.

Nate

Sign In

Javascript form validation for a referrenced php form handler file

Recommended Posts

Chubichan

Link to comment

Share on other sites

btherl

Link to comment

Share on other sites

chronister

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information