November 29th, 2012, 09:22 AM
-
[newbie] Anti-SPAM + form validator?
Hello
This must be a very simple problem for JS experts, but I don't know enough yet about JS to know how to solve it.
After successfully adding and using jQuery's form validator, I'd like to add a simple "Please computer a+b" anti-SPAM check.
The problem is how to combine the two?
Here's a simplified example:
Code:
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
//========= jQuery form validator
jQuery.extend(jQuery.validator.messages, {
required: "This field is required.",
email: "Please enter a valid e-mail address."
});
//========= Simple, anti-spam scheme
var a = Math.ceil(Math.random() * 10);
var b = Math.ceil(Math.random() * 10);
var c = a + b
function DrawBotBoot()
{
document.write("Compute "+ a + " + " + b +"? ");
document.write("<input id='BotBootInput' type='text' maxlength='2' size='2'/>");
}
function ValidBotBoot(){
var d = document.getElementById('BotBootInput').value;
if (d == c) return true;
return false;
}
//========= ?How to check anti-spam answer + validate other fields in form?
$(document).ready(function(){
$("#myform").validate({
/*submitHandler: function(form) {
form.submit();
}
});*/
};
</script>
</head>
<body>
<form action="send.php" method="post" id="myform">
Name <input type="text" maxlength="25" id="name" name="name" class="required"/>
Anti-SPAM check<script type="text/javascript">DrawBotBoot()</script>
<input type="submit" class="submit" value="Send" onclick="alert(ValidBotBoot());"/>
</form>
</body>
Thanks for any help.
November 29th, 2012, 07:44 PM
-
Although this is very easily beaten by a bot; because a math captcha; would not be that hard to crack, for a bot and using a JavaScript Captcha; could cut down on end user accessibility... here is a basic example of what your wanting.
Code:
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
var submit="no";
//========= jQuery form validator
jQuery.extend(jQuery.validator.messages, {
required: "This field is required.",
email: "Please enter a valid e-mail address."
});
// Simple, anti-spam scheme
var a = Math.ceil(Math.random() * 10);
var b = Math.ceil(Math.random() * 10);
var c = " " + a + " + " + b;
function botbuster()
{
var bot_answer_field = " <input id='BotBootInput' type='text' maxlength='2' size='2'/>";
document.getElementById("botty").innerHTML = c + bot_answer_field;
}
function ValidBotBoot(){
var d = parseInt(document.getElementById('BotBootInput').value);
c = eval(c);
if (d == c) {
submit="yes";
}
else if (d != c) {
alert("Invalid Captch - Please Try Again");
submit="no";
}
}
$(document).ready(function(){
new botbuster();
$("#myform").validate({
submitHandler: function(form) {
if (submit=="yes") {
form.submit();
}
}
});
});
</script>
</head>
<body>
<form action="send.php" method="post" id="myform">
Name <input type="text" maxlength="25" id="name" name="name" class="required"/>
Anti-SPAM check<span id="botty"></span>
<input type="submit" class="submit" value="Send" onclick="ValidBotBoot()"/>
</form>
</body>