#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2010
    Posts
    30
    Rep Power
    4

    Question [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.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,041
    Rep Power
    119
    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>

IMN logo majestic logo threadwatch logo seochat tools logo