Integrating validation with Recaptcha (or required fields) - php

Question

I have a form below that I want to make certain fields required based on different things.
I want the following fields to be a straight forward required field with a popup alert if they're not filled in:
Name
Email
I want the phone field to be required if phone is ticked.
Address to be required if post is ticked.
How can I make the alert's pop up if things are missing but if everything is ok then send the form?
<div id="contactform">
<script type="text/javascript">
var RecaptchaOptions = {
theme : 'white'
};
</script>
<form class="form" method="POST" action="<?php the_permalink(); ?>" onsubmit="return validateCaptcha()">
<input type="hidden" name="valid" value="0" />
<table border="0" style="float:left;" width="490">
<tbody>
<tr>
<td>
<p>Name:</p>
</td>
<td> </td>
<td colspan="2"><input type="text" name="fullname" id="fullname" /></td>
</tr>
<tr>
<td>
<p>Organisation:</p>
</td>
<td> </td>
<td colspan="2"><input type="text" name="companyname" id="companyname" /></td>
</tr>
<tr>
<td>
<p>E-mail:</p>
</td>
<td> </td>
<td colspan="2"><input type="text" name="email" id="email" /></td>
</tr>
<tr>
<td>
<p>Daytime Tel:</p>
</td>
<td> </td>
<td colspan="2"><input type="text" name="tel" id="tel" /></td>
</tr>
<tr>
<td valign="top">
<p>Contact Method:</p>
</td>
<td> </td>
<td align="left" valign="top">
<p>
<input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup1[]" value="Phone" id="phone" />
<label style="margin-right: 25px;">Phone</label>
</p>
<p>
<input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup1[]" value="Email" id="email" />
<label style="margin-right: 25px;">Email</label>
</p>
<p>
<input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup1[]" value="Post" id="post" />
<label style="margin-right: 25px;">Post</label>
</p>
</td>
</tr>
<tr>
<td>
<p>Address (if applicable):</p>
</td>
<td> </td>
<td colspan="2"><input type="text" name="address" id="address" /></td>
</tr>
<tr>
<td valign="top">
<p>Where did you hear about us?:</p>
</td>
<td> </td>
<td align="left" valign="top">
<p>
<input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup2[]" value="Search Engine" id="search" />
<label style="margin-right: 25px;">Search Engine</label>
</p>
<p>
<input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup2[]" value="NPA" id="NPA" />
<label style="margin-right: 25px;">NPA</label>
</p>
<p>
<input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup2[]" value="Advertisement" id="advertisement" />
<label style="margin-right: 25px;">Advertisement</label>
</p>
<p>
<input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup2[]" value="Brochure" id="brochure" />
<label style="margin-right: 25px;">Brochure</label>
</p>
<p>
<input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup2[]" value="Show" id="show" />
<label style="margin-right: 25px;">Show</label>
</p>
<p>
<input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup2[]" value="Other" id="other" />
<label style="margin-right: 25px;">Other</label>
</p>
</td>
</tr>
<tr>
<td>
<p>Please Specify:</p>
</td>
<td> </td>
<td colspan="2"><input type="text" name="specify" id="specify" /></td>
</tr>
</tbody>
</table>
<table border="0" style="float:left;margin-left:146px;" width="490">
<tbody>
<tr>
<td> </td>
<td>
<script type="text/javascript">
function validateCaptcha()
{
if ($('input[name="valid"]')) return true;
if ($('input[name="recaptcha_response_field"]').val() == "")
{
alert("Please complete the CAPTCHA field.");
return false
}
$.ajax({
url: "http://www.medilogicuk.com/wp-content/themes/default/verify.php",
type: "POST",
async:"false",
data: {
recaptcha_response_field: $('input[name="recaptcha_response_field"]').val(),
recaptcha_challenge_field: $('input[name="recaptcha_challenge_field"]').val()
},
success: function(data){
if (data == "OK")
{
$('input[name="valid"]').val(1);
$('.form').submit();
}
else
{
alert(data);
}
},
error: function(){
alert("An error occured, please try again later");
}
});
return false;
};
</script>
<?php require_once('recaptchalib.php');
$publickey = ""; // you got this from the signup page
echo recaptcha_get_html($publickey);
?>
</td>
</tr>
<tr>
<td colspan="2"><button type="submit" name="submit" value="Send message">Send message</button></td>
</tr>
</tbody>
</table>
<? if(isset($_POST['submit'])) {
$to = "rob#domain.com";
$header = 'From: info#domain.com';
$subject = "Website enquiry";
$companyname_field = $_POST['companyname'];
$fullname_field = $_POST['fullname'];
$email_field = $_POST['email'];
$tel_field = $_POST['tel'];
$address_field = $_POST['address'];
$specify_field = $_POST['specify'];
$CheckboxGroup1 = $_POST['CheckboxGroup1'];
$CheckboxGroup2 = $_POST['CheckboxGroup2'];
if( is_array($_POST['CheckboxGroup1']) ){
foreach ($_POST['CheckboxGroup1'] as $val) {
$checkbox1results .= $val.", ";
}
}
if( is_array($_POST['CheckboxGroup2']) ){
foreach ($_POST['CheckboxGroup2'] as $val) {
$checkbox2results .= $val.", ";
}
}
$body = "Hello,\n\n You have an enquiry from the website, please see the details below:\n\n Name: $fullname_field\n Company Name: $companyname_field\n E-Mail: $email_field\n Tel: $tel_field\n Method of contact: $checkbox1results\n Address: $address_field\n Hear about us?: $checkbox2results\n Specify: $specify_field\n\n Please reply to the enquiry asap.\n\n Kind Regards \n The website";
mail($to, $subject, $body, $header);
echo "</br><p style=\"color:#e41770!IMPORTANT;\">Thank you for getting in touch, we will contact you shortly.</p>";
} ?>
</form>

Answer 1

Okie a quick Example for you:
The Form
<html>
<body>
<form action="#" method="POST">
<input id="email" type="text" value="" />
<a id="submit" href="#">Submit Form</a>
</form>
</body>
</html>
The Jquery Part:
$(document).ready(function(){
$('a#submit').click(function(event){
event.preventDefault();
validateEmail();
})
});
function validateEmail(){
//declarations
rule = /^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
//check
if ($('input#email').val() === '' || !rule.test($('input#email').val())){
alert ('That is not a Valid Email Address !');
return false;
} else {
alert('validation passed! Submit the form !');
//submit the form action here
}
}
Also you can try it live here http://jsfiddle.net/XMbEK/

Answer 2

You already have your answer in the code:
<script type="text/javascript">
function validateCaptcha()
{
if ($('input[name="valid"]')) return true;
if ($('input[name="recaptcha_response_field"]').val() == "")
{
alert("Please complete the CAPTCHA field.");
return false
}
Add your own needs after this:
if ( phone == 'what it needs to be' )
{
if( email == 'asdasd' ) {
// all is good
} else {
alert( 'need email too' );
}
return true;
}
else
{
alert('Blah blah wrong phone');
return false;
}
etc.