Contact form assistance using jquery for validation

Hello,

I’ve tried creating a contact form using the folllowing:

<form name="contact_form" method="post" action="">      
    <p>
      <label for="name" class="fixedwidth">Your Name: </label>
      <input name="name" type="text" id="name" size="40" />
      <label for="name" id="name_error" class="error"><em>*</em></label>
    </p>
    <p>
      <label for="email" class="fixedwidth">Your Email: </label>
      <input name="email" type="text" id="email" size="40" />
      <label for="email" id="email_error" class="error"><em>*</em></label>
    </p>
    <p>
      <label for="subject" class="fixedwidth">Subject: </label>
      <input name="subject" type="text" id="subject" size="40" />
      <label for="subject" id="subject_error" class="error"><em>*</em></label>
    </p>
    <p>
      <label for="msg" class="fixedwidth">Your Message: </label>
      <textarea name="msg" id="msg" cols="40" rows="7"></textarea>
      <label for="msg" id="msg_error" class="error"><em>*</em></label>
    </p>
    <div id="button">
      <input name="submit" type="submit" value="Submit" class="button" />
    </div>
    </form>
$(function() {
  $('.error').hide();
  $('input.text-input').css({backgroundColor:"#FFFFFF"});
  $('input.text-input').focus(function(){
    $(this).css({backgroundColor:"#FFDDAA"});
  });
  $('input.text-input').blur(function(){
    $(this).css({backgroundColor:"#FFFFFF"});
  });
  $(".button").click(function() {
		
    $('.error').hide();
	
          var name = $("input#name").val();  
          if (name == "") {  
          $("label#name_error").show();  
          $("input#name").focus();  
          return false;  
        }  
          var email = $("input#email").val();  
          if (email == "") {  
          $("label#email_error").show();  
          $("input#email").focus();  
          return false;  
        }  
          var subject = $("input#subject").val();  
          if (subject == "") {  
          $("label#subject_error").show();  
          $("input#subject").focus();  
          return false;  
        }  
		 var msg = $("textarea#msg").val();  
            if (msg == "") {  
          $("label#msg_error").show();  
          $("textarea#msg").focus();  
          return false;
    }
		var dataString = 'name='+ name + '&email=' + email + '&subject=' + subject + '&msg=' + msg;
		//alert (dataString);return false;
		
		$.ajax({
      type: "POST",
      url: "process.php",
      data: dataString,
      success: function() {
        $('#contact').html("<div id='message'></div>");
        $('#message').html("<h2>Your Message Was Submitted!</h2>")
        .append("<p>We will be in touch with you soon.</p>")
        .hide()
        .fadeIn(1500, function() {
          $('#message').append("<img id='checkmark' src='images/check.png' />");
        });
      }
     });
    return false;
	});
});
runOnLoad(function(){
  $("input#name").select().focus();
});
<?php
if ((isset($_POST['name'])) && (strlen(trim($_POST['name'])) > 0)) {
	$name = stripslashes(strip_tags($_POST['name']));
} else {$name = 'No name entered';}
if ((isset($_POST['email'])) && (strlen(trim($_POST['email'])) > 0)) {
	$email = stripslashes(strip_tags($_POST['email']));
} else {$email = 'Invalid email';}
if ((isset($_POST['subject'])) && (strlen(trim($_POST['subject'])) > 0)) {
	$phone = stripslashes(strip_tags($_POST['subject']));
} else {$phone = 'No Subject';}
if ((isset($_POST['msg'])) && (strlen(trim($_POST['msg'])) > 0)) {
	$phone = stripslashes(strip_tags($_POST['msg']));
} else {$phone = 'No message entered';}
ob_start();
?>
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<table width="550" border="1" cellspacing="2" cellpadding="2">
  <tr bgcolor="#eeffee">
    <td>Name</td>
    <td><?=$name;?></td>
  </tr>
  <tr bgcolor="#eeeeff">
    <td>Email</td>
    <td><?=$email;?></td>
  </tr>
  <tr bgcolor="#eeffee">
    <td>Subject</td>
    <td><?=$subject;?></td>
  </tr>
  <tr bgcolor="#eeffee">
    <td>Message</td>
    <td><?=$msg;?></td>
  </tr>
</table>
</body>
</html>
<?
$body = ob_get_contents();

$to = 'myemail.com';
$email = 'myemail.com';
$fromaddress = "myemail.com";
$fromname = "Online Contact";

require("/class.phpmailer.php");

$mail = new PHPMailer();

$mail->From     = "myemail.com";
$mail->FromName = "Contact Form";
$mail->AddAddress("email_address@example.com","Name 1");
$mail->AddAddress("another_address@example.com","Name 2");

$mail->WordWrap = 50;
$mail->IsHTML(true);

$mail->Subject  =  "Form:  Contact form submitted";
$mail->Body     =  $body;
$mail->AltBody  =  "This is the text-only body";

if(!$mail->Send()) {
	$recipient = 'myemail.com';
	$subject = 'Contact form failed';
	$content = $body;	
  mail($recipient, $subject, $content, "From: mail@yourdomain.com\\r\
Reply-To: $email\\r\
X-Mailer: DT_formmail");
  exit;
}
?>

Everything works from a users end- meaning the form validates that all fields have been filled in, and the user gets the confirmation message, without the page refreshing, that form was submitted… BUT I do not receive the emails. I’m assuming there must be an issue within the php.

What error(s) have I made???

Also, if you could assist with a better jquery validation, it would be greatly appreciated!!!

Regards,

If you view your server logs you may see messages being generated and sent to "myemail.com’ because that is the value set for $recipient just before the mail process is called.

Hey ParkinT,

Thanks for your reply, but i do have my actual email address set as the value for $recipient. “myemail.com” was just for example purposes.

Do you have any other suggestions? I’m still experiencing difficulty with this.

So with the help from Cups in the PHP forum, I’ve been able to gain a understanding of php along with the PHPMailer etc. I’ve re-written my coding and all is fine in receiving emails. Now my issue is validating. I’ve tried to validate on both the jquery and php side, but not having any luck. Here is my new coding:

HTML code:

<form action=“” method=“post” id=“contact_form”>
<p>
<label for=“name”>Name</label>
<input type=“text” name=“name” size=“30” id=“name” />
</p>
<p>
<label for=“email”>Email</label>
<input type=“text” name=“email” size=“30” id=“email” />
</p>
<p>
<label for=“subject”>Subject</label>
<input type=“text” name=“subject” size=“30” id=“subject” />

            &lt;/p&gt;
            &lt;p&gt;
            	&lt;label for="message"&gt;Message&lt;/label&gt;
     			&lt;textarea id="message" name="message" cols="40" rows="7"&gt;&lt;/textarea&gt;
            &lt;/p&gt;       	
            &lt;p&gt;
            	&lt;input type="submit" value="Submit" class="submit" /&gt;
            &lt;/p&gt;
       	&lt;/form&gt;    

jQuery code:

$(function() {
$(‘.error’).hide();
$(‘input.text-input’).css({backgroundColor:“#FFFFFF”});
$(‘input.text-input’).focus(function(){
$(this).css({backgroundColor:“#FFDDAA”});
});
$(‘input.text-input’).blur(function(){
$(this).css({backgroundColor:“#FFFFFF”});
});
$(“.button”).click(function() {

$('.error').hide();

      var name = $("input#name").val();  
      if (name == "") {  
      $("label#name_error").show();  
      $("input#name").focus();  
      return false;  
    }  
      var email = $("input#email").val();  
      if (email == "") {  
      $("label#email_error").show();  
      $("input#email").focus();  
      return false;  
    }  
      var subject = $("input#subject").val();  
      if (subject == "") {  
      $("label#subject_error").show();  
      $("input#subject").focus();  
      return false;  
    }  
	 var msg = $("textarea#msg").val();  
        if (msg == "") {  
      $("label#msg_error").show();  
      $("textarea#msg").focus();  
      return false;
}
	var dataString = 'name='+ name + '&email=' + email + '&subject=' + subject + '&msg=' + msg;
	//alert (dataString);return false;
	
	$.ajax({
  type: "POST",
  url: "process.php",
  data: dataString,
  success: function() {
    $('#contact').html("&lt;div id='message'&gt;&lt;/div&gt;");
    $('#message').html("&lt;h2&gt;Your Message Was Submitted!&lt;/h2&gt;")
    .append("&lt;p&gt;We will be in touch with you soon.&lt;/p&gt;")
    .hide()
    .fadeIn(1500, function() {
      $('#message').append("&lt;img id='checkmark' src='images/check.png' /&gt;");
    });
  }
 });
return false;
});

});
runOnLoad(function(){
$(“input#name”).select().focus();
});

Can you assist me with my validation?