Loading
Spam-less And Robot-less Forms With jQuery
This tutorial has been converted to a jQuery plugin which you can find here – http://jasonlau.biz/home/a-better-form-a-jquery-plugin

Are you trying to figure out how to reduce or eliminate spam on your website email or comment forms?

My website was slammed by spammers on a daily basis. Typically, the spam attacks would be from robots that would root-out the form fields on each webpage and then automate form submissions which were loaded with spam.

I created an easy solution that does not involve the use of annoying CAPTCHA security phrase generators or similar technology blunders.

My idea does however require javascript and jQuery.

The idea is simple – spam-bots cannot submit a form that does not exist. Nor can spam-bots use a form field which has no name. So, if you remove the form elements from the webpage you effectively stop the robots.

How can I use a form that does not exist? That is easily done with jQuery. I’ll show you how.
  1. Include jQuery in the HTML document’s <head> section before the </head> tag .
    <script src=”http://code.jquery.com/jquery-latest.js” type=”text/javascript”></script>

  2. Add a <noscript> tag to your document body so visitors will know javascript is needed to use the website. I found it’s best to add this tag to the end of the HTML body so that it does not affect how your website is displayed in search engine results. Adding it to the beginning may cause it to show up as the description for your webpage in the search engine results.
    <noscript>Javascript is required to view this webpage properly. Please enable javascript in your browser settings.</noscript>

  3. Create a div container for your form in your HTML document’s <body> section before the </body> tag.
    <div id=”form-container”></div>

  4. Make a form inside the form-container div following these simple rules.
    1. When you make your form do not include the <form> tag. The form tag is a target for robots.
    2. Rather than using the name attribute for each form field, use the id attribute instead. The name attribute is another target for robots.
    3. If you need to include a submit button in your form, use type=button instead of type=submit.
    4. Add disabled=”disabled” to each form element except the first.
    <strong>Email:</strong> <input id=”email” />
    <strong>Comment:</strong>
    <textarea id=”comment” disabled=”disabled”></textarea>
    <input type=”button” id=”sub-button” value=”Submit” disabled=”disabled” />

  5. After the form is assembled, go back to the <head> section where the script for the form will be placed.
  6. Make a jQuery javascript block which will call jQuery on page load. The form script will be placed where noted in the script below.
    <script type=”text/javascript”>

    $(document).ready(function () {

    // Form script goes here

    });
    </script>

  7. I am going to include some basic email address validation in this example which will verify that the email field is actually an email address.
    var checkRegexp = function(o,regexp){
    if(!(regexp.test(o.val()))){
    return false;
    } else {
    return true;
    }
    };

  8. I disabled most of the form fields in step 4-4 so the user must follow a certain order while filling in form data. To make this work, I will make a script to enable or disable each field based on user interaction. Basically, if there is no data in field 1, field 2 is disabled. Field1 is not enabled until field 2 value has changed and contains data, and so on. Also, this is where I implement the email address validation. In this example, when the email field is changed, the address is validated and the user is alerted if validation fails.
    $(“#email”).change(function(){
    if(!$(“#email-tip”).html()){
    $(this).after(‘<div id=”email-tip” style=”display: none; background-color: #FFFFFF;”>Please enter a valid email address.</div>’);
    }

    if($(this).val() != ” && $(this).val() != ‘ ‘ && !checkRegexp($(this),/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i)) {
    $(“#comment”).attr(‘disabled’,'disabled’);
    $(“#email-tip”).show();
    $(“#email-tip”).animate( { fontSize:”2em” } , 500 )
    .animate( { fontSize:”1em” } , 500 );
    } else {
    if($(“#email-tip”).attr(‘display’) != ‘none’){
    $(“#email-tip”).hide(‘slow’);
    }
    $(“#comment”).attr(‘disabled’,”);
    }
    });

    $(“#comment”).change(function(){
    if($(this).val() != ” && $(this).val() != ‘ ‘) {
    $(“#sub-button”).attr(‘disabled’,”);
    } else {
    $(“#sub-button”).attr(‘disabled’,'disabled’);
    }
    });


  9. If you want to eliminate certain types of user input, such as html links or bbcode links, here is a handy little addition I made just for that.
    $(“#comment”).bind(“keyup”,function(){
    var comment_filters = ['url=','link=','http:','www.','href','<a'];
    var comment = $(“#comment”).val();
    for(var i in comment_filters){
    var checkit = comment.split(comment_filters[i]);
    if(checkit.length > 1){
    $(“#comment”).val(checkit[0]);
    }
    }
    });
    That script will basically erase the unwanted input AS the user attempts to type it into the form. The offending input will simply disappear before their very eyes. I have added a number of filters to the variable comment_filters which will eliminate links from the user input. There is no limit to the number of filters I can use. Of course, the user could always type in spaces between each letter to post links, but they will not be click-able, followable, or even copy/paste-able. Too much work for a spammer!

  10. Everything is ready now for the form submission script. Once the user has appropriately filled in all of the form fields the submit button has been enabled and the form is ready to submit.
    In earlier steps I left out the form tag, left out all of the name attributes, and made a regular button instead of a submit button. Now I have to fix all of that, but only after the user has actually interacted with the button. I will bind a click function to the button object so that the user must use a mouse to manually click the button; an action a spam-bot is unable to reproduce. This function will wrap the form-container div with a form tag, will add the name attributes to the input fields, and finally, will submit the form for processing.

    For each input, textarea, or select menu, this script will create a name attribute by copying the id attribute for that object. This only takes place in the form-container so it does not affect other forms on the same page.
    $(“#sub-button”).bind(“click”,function(){
    $(‘#form-container input, #form-container textarea, #form-container select’).each(function(){
    $(this).attr(‘name’,$(this).attr(‘id’));
    });

    $(‘#form-container’).wrap(‘<form id=”comment-form” action=”#” method=”POST”></form>’);
    alert(‘Your comment has been submitted!’);
    $(“#comment-form”).submit();
    });
  11. Save.
So, as you can see, I have created a form that is not really a form at all. My form is lacking the elements that spam-bots rely upon for automated submissions. My method will eliminate most if not all of the automated form submissions on your website.

Here is the complete, working code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Jason Lau" />

<title>JasonLau.biz Robot-less And Spam-less Forms With jQuery</title>
<script src="http://jasonlau.biz/javascript/jquery/latest/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
<!–
/* Spam-less Robot-less Forms Example – (c)2010 JasonLau.biz */
$(document).ready(function(){
var checkRegexp = function(o,regexp){
if(!(regexp.test(o.val()))){
return false;
} else {
return true;
}
};

$("#email").change(function(){
if(!$("#email-tip").html()){
$(this).after('<div id="email-tip" style="display: none; background-color: #FFFFFF;">Please enter a valid email address.</div>');
}
if($(this).val() != '' && $(this).val() != ' ' && !checkRegexp($(this),/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i)) {
$("#comment").attr('disabled','disabled');
$("#email-tip").show();
$("#email-tip").animate({ fontSize:"2em" },500)
.animate({ fontSize:"1em" },500);
} else {
if($("#email-tip").attr('display') != 'none'){
$("#email-tip").hide('slow');
}
$("#comment").attr('disabled','');
}
});

$("#comment").change(function(){
if($(this).val() != '' && $(this).val() != ' '){
$("#sub-button").attr('disabled','');
} else {
$("#sub-button").attr('disabled','disabled');
}
});

$("#comment").bind("keyup",function(){

var comment_filters = ['url=','link=','http:','www.','href','<a'];

var comment = $("#comment").val();
for(var i in comment_filters){
var checkit = comment.split(comment_filters[i]);
if(checkit.length > 1){
$("#comment").val(checkit[0]);
}
}
});

$("#sub-button").bind("click",function(){
$('#form-container input, #form-container textarea, #form-container select').each(function(){
$(this).attr('name',$(this).attr('id'));
});
$('#form-container').wrap('<form id="comment-form" action="#" method="POST"></form>');
alert('Your comment has been submitted!');
$("#comment-form").submit();

});
});
–>
</script>
</head>

<body>

<div id="form-container">
<strong>Email:</strong> <input id="email" /><br />
<strong>Comment:</strong><br />
<textarea id="comment" disabled="disabled"></textarea><br />
<input type="button" id="sub-button" value="Submit" disabled="disabled" />
</div>

<noscript>Javascript is required to view this webpage properly. Please enable javascript in your browser settings.</noscript>

</body>
</html>

Tags: , , , , , , , , , , , , , , , , , , , , , , ,

This entry was posted on Saturday, February 27th, 2010 at 12:05 pm and is filed under jQuery. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

«
»

Leave a Comment







Submit Comment