PDA

View Full Version : Help with Form Validation using Javascript & PHP

esenger
10-06-2008, 01:29 AM
I'm trying to get this form to validate - everything is working except for the validation for the CAPTCHA code. When I include that, the form doesn't validate anything and just sends the e-mail. It's probably something easy, as I'm a beginner at this, but I'd really appreciate any help you can give me.

Thanks!

The code is:

HTML/Javascript/AJAX:
<style>
<!--
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.style2 {
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: bold;
}
body {
background-color: #B79E6C;
}
.style3 {
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
}
.error {
font-family: Arial, Helvetica, sans-serif;
color: #FF0000;
display: none;
}
-->
</style>

<form onSubmit="return checkForm();" action="http://website.com/FormToEmail.php" method="post">
<input type="hidden" name="recipient" value="email@domain.com" />

<script>
function checkCAPTCHA() {

xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX - please upgrade your browser to send an e-mail through this page.");
return;
}

code = document.getElementById("code").value;
var url="http://www.freedom-academy.com/checkcaptcha.asp";
url=url+"?code2="+code;
url=url+"&sid="+Math.random();

xmlHttp.open("GET",url,true);
xmlHttp.send(null);

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.getElementByID("code2").value=xmlHttp.responseText;
}
}
}

function checkForm() {
name = document.getElementById("name").value;
email = document.getElementById("email").value;
comments = document.getElementById("comments").value;
code = document.getElementById("code").value;
code2 = checkCAPTCHA();

if (name == "") {
hideAllErrors();
document.getElementById("nameError").style.display = "block";
document.getElementById("name").select();
document.getElementById("name").focus();
return false;
} else if (email == "") {
hideAllErrors();
document.getElementById("emailError").style.display = "block";
document.getElementById("email").select();
document.getElementById("email").focus();
return false;
} else if (email.indexOf("@") < 1 || email.indexOf(".") < 1) {
hideAllErrors();
document.getElementById("emailError2").style.display = "block";
document.getElementById("email").select();
document.getElementById("email").focus();
return false;
} else if (comments == "") {
hideAllErrors();
document.getElementById("commentsError").style.display = "block";
document.getElementById("comments").select();
document.getElementById("comments").focus();
return false;
} else if (code == "") {
hideAllErrors();
document.getElementById("codeError").style.display = "block";
document.getElementById("code").select();
document.getElementById("code").focus();
return false;
} else if (code2 == "incorrect") {
hideAllErrors();
document.getElementById("code2Error").style.display = "block";
document.getElementById("code2").select();
document.getElementById("code2").focus();
return false;
}
return true;
}

function hideAllErrors() {
document.getElementById("nameError").style.display = "none"
document.getElementById("emailError").style.display = "none"
document.getElementById("emailError2").style.display = "none"
document.getElementById("commentsError").style.display = "none"
document.getElementById("codeError").style.display = "none"
document.getElementById("code2Error").style.display = "none"
}


</script>


<table border="0" cellspacing="5" width="600">
<tr><td><span class="style1">Name*:</span></td>
<td><input type="text" name="name" size="43" maxlength="60" style="width:350px; border:1px solid #999999" /><div class=error id=nameError>Please enter your name<br /></div></td></tr>
<tr><td><span class="style1">Email address*:</span></td>
<td><input type="text" name="email" size="43" maxlength="60" style="width:350px; border:1px solid #999999" /><div class=error id=emailError>Please enter your email address<br /></div>
<div class=error id=emailError2>Please enter a valid email address<br /></div></td></tr>
<tr><td><span class="style1">Phone number:</span></td>
<td><input type="text" name="phone" size="43" maxlength="43" style="width:350px; border:1px solid #999999" /></td></tr>
<tr><td valign="top"><span class="style1">Comments and questions*:</span></td>
<td><textarea name="Comments" id="Comments" rows="7" cols="40" style="width:350px; border:1px solid #999999"></textarea><div class=error id=commentsError>Please enter your comments<br /></div></td></tr>

<tr><td colspan="2" align="center"> <br />
<table border="0" cellpadding="0" cellspacing="0">
<tr><td> <span class="style2">Enter web form code*:</span>
<input id="code" name="code" type="text" style="width:80px; border:1px solid #999999" maxlength="6" /><div class=error id=codeError>Please enter the code from the box<br />
</div>
<div class=error id=code2Error>The code is not correct - please try again<br /></div>
</td>
<td><img id="captcha" alt="Web Form Code" style="margin-left:20px; border:1px solid #999999"
src="http://website.com/securimage/securimage_show.php" /></td></tr></table>

<tr><td>&nbsp;</td><td align="center"><font face="Arial, Helvetica, sans-serif"><a href="#" onclick="document.getElementById('captcha').src = 'http://website.com/securimage/securimage_show.php?' + Math.random(); return false">Load New Image</a></font>
</td></tr>
<br />
</td></tr>
<tr><td>&nbsp;</td><td><input type="submit" value="Send"><font face="arial" size="1"></font></td></tr>
<tr><td><i>*required fields</i></td></tr>
</table>
</form>

PHP Code:
<?php

header("Cache-Control: no-cache, must-revalidate");
// Date in the past

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

//get the code entered from URL
$webcode=$_GET["code2"];

include_once 'securimage/securimage.php';

$securimage = new Securimage();

if ($securimage->check('$webcode') == false) {

$response="incorrect";

}

else {

$response="correct";

}

//output the response

echo $response;

?>
abduraooft
10-06-2008, 08:39 AM
if ($securimage->check('$webcode') == false) {

$response="incorrect";

}
You'd need to use double-quotes to wrap a PHP variable, to parse it correctly. (Or just remove the quotes, if there is nothing else along with it)
esenger
10-07-2008, 06:19 AM
Thanks so much. But I'm so sorry to report that didn't fix it. I'm still getting the same problem. I think it's something in the Javascript since none of the errors are processing. Any ideas?
esenger
10-08-2008, 01:10 PM
Kate,

Thanks for that explanation. In the code above I'm trying to use a mix of Javascript and server-side coding, but it's not working. Any ideas what could be causing it? I'm thinking it's somewhere in the Javascript, maybe how I'm calling the function checkCAPTCHA to set the result of the server side process equal to a variable. Or it's in the function checkCAPTCHA. When I comment out those lines, everything works fine.

Thanks!