Validation Question?

[PicnicTutorials]

Hello, here is my test page http://tinyurl.com/ybdacc9

 

I've Done this page here http://www.thatagency.com/design-studio-blog/2009/10/jquery-validate-plugin-plus-php-equals-captcha/ and have the thank you message comming back to the same page using this post. http://www.webmaster-talk.com/php-forum/154171-contact-form-popup-confirmation.html

 

All works fine when JS is enabled, but I need some security aswell when JS is off. There is a lot to work out here, but as a start, how can I grab and clean this bit in bold

 

$.validator.methods.equal = function(value, element, param) {

return value == param;

};

$(document).ready(function(){

$("#contactform").validate({

rules: {

name: "required",

email: {

required: true,

email: true

},

captcha: {

equal: <?php echo $randomNumTotal; ?>

}

},

messages: {

email: "",

name: "",

captcha: ""

}

});

});

 

and put and clean it here just below the form

 

<?php } else {

 

// email script

 

echo "Thanks, message received";

}?>

 

For clarification, here is my form, and you can see my JS in the head of the test page. Thanks!

 

<?php if(!$_POST){

?>

Name

 

Email

 

Message

 

<?php } else {

 

// email script

 

echo "Thanks, message received";

}?>

 

 

...OR if you can point me to a similar method I'm all ears. I've pretty much read all the web has to offer on the subject. I'm trying to work with the ones I can some what understand.

Edited October 30, 2009 by Eric

[falkencreative]

You probably need to rewrite the captcha section to be based on PHP, rather than javascript. I'll take a look at it when I have time.

[PicnicTutorials]

You probably need to rewrite the captcha section to be based on PHP, rather than javascript. I'll take a look at it when I have time.

 

Thanks Ben! Although, I need it to be based off the JS as well so I can validate it with jquery validation. Although, I could probably set up a remote validation rule, but then I'm getting in to new territory (new territory scares me).

 

So here is what I'm after... you got the basic form that answers to itself. Actually, here is the whole page (php included!) so you can better see what I'm working with.

 

<?php

# Set both random numbers you want to add

$randomNum = rand(0,9);

$randomNum2 = rand(0,9);

# Get the total.

$randomNumTotal = $randomNum + $randomNum2;

?>

html, body {

overflow:hidden;

background:none;

}

#contactform {

float:left;

position:relative;

width:319px;

padding:0;

font-size:13px;

}

#contactform:hover, #contactform:focus {

background-position:0 -322px;

}

#contactform:hover label, #contactform:focus label {

font-weight:bold;

}

#contactform label {

cursor:pointer;

position:relative; /* moved with PR because Opera */

left:13px;

margin-right:100%;

}

#contactform input {

margin:4px 0 15px;

border:0;

padding:13px;

height:17px; /* actual height = 43px */

width:218px; /* actual width = 244px */

background:url(img/input-test.jpg) 100% 0 no-repeat;

}

* html #contactform input {

background-attachment:fixed;

}

#contactform input:hover, #contactform input:focus {

background-position:100% -43px;

outline:0;

}

#contactform textarea {

height:122px; /* actual height = 148px */

width:293px; /* actula width = 319px */

border:0;

background:none;

background:url(img/textarea.jpg) 0 0 no-repeat;

overflow:auto;

outline:0;

padding:13px;

resize:none;

}

#contactform textarea:hover, #contactform textarea:focus {

background-position:0 -148px;

}

#contactform input#captcha {

width:89px;

margin:0; /* if JS is off this kicks in */

float:left;

background:url(img/select2.jpg) 0 0 no-repeat;

}

#contactform input#captcha:hover {

background-position:0 -43px;

}

#contactform input#contact-login {

float:right;

width:115px;

height:43px;

cursor:pointer;

margin:13px 0 0;

background:url(img/login2.jpg) no-repeat;

}

* html #contactform input#contact-login {

margin-left:-6px;

}

#contactform #contact-login:hover, #contactform #contact-login:focus {

background-position:0 -43px;

}

#contactform input.error {background-position:100% -86px;}

#contactform input#captcha.error {background-position:0 -43px;}

.required {color:red; font-weight:bold;}

$.validator.methods.equal = function(value, element, param) {

return value == param;

};

$(document).ready(function(){

$("#contactform").validate({

rules: {

name: "required",

email: {

required: true,

email: true

},

captcha: {

equal: <?php echo $randomNumTotal; ?>

}

},

messages: {

email: "",

name: "",

captcha: ""

}

});

});

 

<?php if(!$_POST){

?>

Name

 

Email

 

Message

 

<?php } else {

 

// email script

 

echo "Thanks, message received";

}?>

 

 

...And I would like to add two simple php validation rules to right before the thank you message.

 

One: the random total captcha: {equal: <?php echo $randomNumTotal; ?>} or if I can't make that work I can always just do a constant number like 2 + 2 = ?.

 

Two: I would like to also add the honeypot php code seen here. http://haacked.com/archive/2007/09/11/honeypot-captcha.aspx adding his php code (as is!) throws errors. The CSS etc I got.

 

So thats it. For now, I think I'll let the JS handle the brunt of it and just let the PHP keep the bad guys out.

Edited October 31, 2009 by Eric