This is a derivation of getting validate.js to work and How to make my contact form send me Email
I'm putting together a simple contact form with validate.js and php. I've gotten the validation done, and began calling the server for the functionality with php - BUT, now instead of the form submitting it just generated the JS validation confirmation. How do I allow it to submit? It would be cool to combine to the validation confirmation and having it submit properly (eg. 'Awesome, you filled out the form and it's submitted via the JS setup with Validate) But having it submit and redirect to a confirmation page is fine also. Below is the code:
Updated 12/15 4:17PM EST Libraries being called in the head:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
JS being called inline:
<script type="text/javascript">
SubmittingForm=function() {
document.myform.submit();
}
$(document).ready(function() {
$("#fvujq-form1").validate({
submitHandler:function(form) {
SubmittingForm();
},
rules: {
name: "required", // simple rule, converted to {required:true}
email: { // compound rule
required: true,
email: true
},
url: {
url: true
},
comment: {
required: true
}
},
messages: {
comment: "Enter your damn comment."
}
});
});
jQuery.validator.addMethod(
"selectNone",
function(value, element) {
if (element.value == "none")
{
return false;
}
else return true;
},
"Please select an option."
);
$(document).ready(function() {
$("#fvujq-form2").validate({
submitHandler:function(form) {
SubmittingForm();
},
rules: {
sport: {
selectNone: true
}
}
});
});
</script>
Form Mark-up:
<p style="font-style:italic; font-size:12px; font-weigh: normal; margin-top: -89px; margin-left: 33px;">Contact me written in a different language.</p> <img src="http://www.cameroncashwell.com/imgs/pointing-left.png" style="float: right; margin-right: 140px; margin-top: -89px;">
<div class="form-div">
<form id="fvujq-form1" style="font-size:22px; color:#333;" method="post" action="send_form_email.php">
<div class="form-row"><span class="label">Name *</span><input type="text" name="name" /></div>
<div class="form-row"><span class="label">Email *</span><input type="text" name="email" /></div>
<div class="form-row"><span class="label">URL</span><input type="text" name="url" /></div>
<div class="form-row"><span class="label">Comment *</span><textarea name="comment"></textarea></div>
<div class="form-row"><input class="submit" type="submit" value="Submit"></div>
</form>
</div>
Within 'send_form_email.php':
<?php
if(isset($_POST['email'])) {
// EDIT THE 2 LINES BELOW AS REQUIRED
$email_to = "chaseoutt@gmail.com";
$email_subject = "How to be a cool";
function died($error) {
// your error code can go here
echo "We are very sorry, but there were error(s) found with the form you submitted. ";
echo "These errors appear below.<br /><br />";
echo $error."<br /><br />";
echo "Please go back and fix these errors.<br /><br />";
die();
}
// validation expected data exists
if(!isset($_POST['name']) ||
!isset($_POST['email']) ||
!isset($_POST['url']) ||
!isset($_POST['project']) ||
!isset($_POST['comments'])) {
died('We are sorry, but there appears to be a problem with the form you submitted.');
}
$name = $_POST['name']; // required
$email = $_POST['email']; // required
$url = $_POST['url']; // required
$project = $_POST['project']; // not required
$comments = $_POST['comments']; // required
$error_message = "";
$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
if(!preg_match($email_exp,$email_from)) {
$error_message .= 'The Email Address you entered does not appear to be valid.<br />';
}
$string_exp = "/^[A-Za-z .'-]+$/";
if(!preg_match($string_exp,$first_name)) {
$error_message .= 'The First Name you entered does not appear to be valid.<br />';
}
if(!preg_match($string_exp,$last_name)) {
$error_message .= 'The Last Name you entered does not appear to be valid.<br />';
}
if(strlen($comments) < 2) {
$error_message .= 'The Comments you entered do not appear to be valid.<br />';
}
if(strlen($error_message) > 0) {
died($error_message);
}
$email_message = "Form details below.
";
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
$email_message .= "Name: ".clean_string($name)."
";
$email_message .= "Email: ".clean_string($email)."
";
$email_message .= "URL: ".clean_string($url)."
";
$email_message .= "Project: ".clean_string($project)."
";
$email_message .= "Comments: ".clean_string($comments)."
";
// create email headers
$headers = 'From: '.$email_from."
".
'Reply-To: '.$email_from."
" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);
?>
<!-- include your own success html here -->
Thank you for contacting us. We will be in touch with you very soon.
<?php
}
?>
Now, when I correctly fill out the form I get these errors from the php file (action="send_form_email.php") where they are declared:
We are very sorry, but there were error(s) found with the form you submitted. These errors appear below.
We are sorry, but there appears to be a problem with the form you submitted.
Please go back and fix these errors.
