Hi,
I seem to be having trouble adding an image verification to the php code I have.
I have my index.php page with the contact form on and contact.php to verify everything plus the javascript.
index.php:
<form id=“contactForm” method=“post” action=“contact.php”>
<p>
<input id=“name” class=“textInput toggle” type=“text” name=“name” value=“Name” autocomplete=“off” /><br />
<small class=“errorText”>Please write a valid name bigger than 3 letters.</small>
</p>
<p>
<input id="email" class="textInput toggle" type="text" name="email" value="Email" autocomplete="off" /><br />
<small class="errorText">Please write a valid email address.</small>
</p>
<p>
<img src="verificationimage.php?9293" width="91" height="28" />
<input id="verif_box" class="textInput toggle" type="text" name="verif_box" autocomplete="off" />
<small class="errorText">Please write a valid verification code.</small>
</p>
<p>
<textarea id="message" class="textarea toggle" name="message" rows="11" cols="25">Message</textarea><br />
<small class="errorText">Please write message bigger that 10 letters.</small>
</p>
<p class="contactFooter">
<small class="requierd">All fields are required!</small>
<img id="loading" src="style/images/loading.gif" alt="Loading" />
<span id="submit" class="button">
<input name="submitted" id="submitted" type="submit" value="send" />
</span>
</p>
<p id="response"></p>
</form>
contact.php:
<?php
// Write bellow the email address where you want to receive the messages
$email = “webmaster@site.com”;
// Ensure that this page it’s not loaded directly
if(isset($_POST[‘name’])){
// Declare a variable for storing errors
$errors = array();
// Get the information from the contact form
$inputName = strip_tags($_POST['name']);
$inputEmail = strip_tags($_POST['email']);
$inputMessage = strip_tags($_POST['message']);
$inputVerifBox = strip_tags($_POST['verif_box']);
// Declare an aray whith the form fields that are requierd
$required = array('Name field' => 'name', 'Email field' => 'email', 'Message field' => 'message');
// Make sure that the requierd fields are not empty
foreach($required as $key=>$value){
if(isset($_POST[$value]) && $_POST[$value] !== ''){continue;}
else{$errors[] = '<small class="errorText">' . $key . ' cannot be left blank.</small><br />';}
}
// Make sure the email is valid.
if (!validateEmail($inputEmail)) $errors[] = '<small class="errorText">Please write a valid email address.</small><br />';
// Make sure the verifcation image is valid.
if (!validateVerifBox($inputVerifBox)) $errors[] = '<small class="errorText">Please write a valid code.</small><br />';
// Start composing the message
$message = "You have received this message from the contact form placed on " . $_SERVER['HTTP_HOST'] ."\
";
$message .= "NAME: $inputName\
";
$message .= "EMAIL: $inputEmail
";
$message .= "\
MESSAGE:
$inputMessage";
//Check for errors
if(empty($errors)){
// If no error then send the mail
if(mail($email, "Message from $inputName - On " . $_SERVER['HTTP_HOST'], $message, "From: $inputEmail")){
echo '<small>Your message was sent.</small>';
}else{
echo '<small class="errorText">There was a problem sending your message. Please Try again.</small><br />';
}
}else{
// If errors then ouput them
echo implode('<br />', $errors);
}
}else{
die(‘Please do not load this page directly.’);
}
function validateEmail($email){
if(eregi(“[1]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$”, $email)) return true;
else return false;
}
?>
and … Contact.js:
$(document).ready(function() {
// Contact Form
var cForm = $("#contactForm");
var cinputName = cForm.find("#name");
var cinputEmail = cForm.find("#email");
var cinputMessage = cForm.find("#message");
var cloadingImage = cForm.find('#loading');
var cresponseText = cForm.find("#response");
// On Submitting
cForm.bind("submit", function(e){
if(validateName(e, cinputName) & validateEmail(e, cinputEmail) & validateMessage(e, cinputMessage)) {
ajaxSend(cForm, cresponseText, cloadingImage);
};
return false;
});
// On key press
cinputName.bind("keyup", function(e){
validateName(e, cinputName);
});
cinputEmail.bind("keyup", function(e){
validateEmail(e, cinputEmail);
});
cinputMessage.bind("keyup", function(e){
validateMessage(e, cinputMessage);
});
});
// Helper functions requierd by the contact form
function validateName(event, input){
if( input.val().length < 4 || input.val() == “Name” ){
if(event.type != “keyup”) {
input.addClass(“error”);
input.nextAll(‘.errorText’).slideDown();
}
return false;
} else {
input.removeClass(“error”);
input.nextAll(‘.errorText’).slideUp();
return true;
}
}
function validateEmail(event, input){
var a = input.val();
var filter = /[2]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
if( filter.test(a) ){
input.removeClass("error");
input.nextAll('.errorText').slideUp();
return true;
}else{
if(event.type != "keyup") {
input.addClass("error");
input.nextAll('.errorText').slideDown();
}
return false;
}
}
function validateMessage(event, input){
if( input.val().length < 10 || input.val() == “your message” ){
if(event.type != “keyup”) {
input.addClass(“error”);
input.nextAll(‘.errorText’).slideDown();
}
return false;
}else{
input.removeClass(“error”);
input.nextAll(‘.errorText’).slideUp();
return true;
}
}
function ajaxSend(form, response, loading){
loading.show();
response.slideUp().animate({X:""} , 200, "linear", function(){
response.html('<small>Please wait, your message is being processed.</small><br />').slideDown();
});
// Make AJAX request
$.post('contact.php', form.serialize(), function(data){
loading.hide(200);
response.slideUp().animate({X:""} , 200, "linear", function(){ response.html(data).slideDown(); });
});
//Cancel default action
return false;
};
I’m using verif_box as the input and the image is above it. I have tried editing the contact.php, so that it would accept verif_box and give it chjaracter and numeral restrictions, so that spammers can’t abuse the form.
Any help would be great, but please, if you do have a solution please make sure I can understand it as I’m new to this.
Thanks.
