JasonLau.biz

A Better Form – A jQuery Plugin

Jason — Fri, 05 Mar 2010 23:27:30 +0000

Plugin Description
Download
Options
Examples
Issues

A Better Form is a plugin I made for jQuery to help reduce spam comments, spam emails and other automated form submissions.

A Better Form allows you to omit certain attributes from HTML forms which are frequently targeted by spam-bots, such as the form tag and name attributes in form elements.

A Better Form is easy to use. Just follow a few simple rules when you create your HTML forms:

Do not use the form tag.
Use the id attribute instead of the name attribute for all form objects.
Use a push button or image button instead of the submit type. The button you use must have the class absubmit.

Download The Source Code: jquery.abetterform.js
Version: 1.0.6

Changelog

3-18-2010 – 1.0.6 – Fixed bug which caused hidden fields to not have a name. Added filtertext and textfilters options. See the options tab for more info.
3-17-2010 – 1.0.5 – Fixed bug which caused hidden fields to be disabled.
3-16-2010 – 1.0.4 – Both keyup and change events are now used for textareas and text fields.
3-14-2010 – 1.0.3 – Fixed a bug which caused all form fields on the page, including those outside of the specified object, to be disabled.
3-14-2010 – 1.0.2 – Added the following options: sequential_disable, pluggable, serialized, multipart, clickonce . Refer to the Options tab for more information on those options.
3-10-2010 – 1.0.1 – Fixes a typo which caused default form method to be invalid.
3-5-2010 – 1.0.0 – Initial release

A Better Form has the following options:

attributes: The attributes option holds any form attributes you would normally use in a form tag. However, this option is not required. If the attributes option is omitted, the form will POST by default and the parent page will be the form-action target.
$("#form-container").abform({
attributes :'id="testing" action="index.html" method="POST"'
});
clickonce: Disable the submit button after the user clicks on it. This prevents multiple clicks.
- true (default)
- false
multipart: Is it a multipart form? This is simply a shortcut to typing it into the form attributes. You cannot use the serialized option for forms which use the file select field. jQuery does not serialize the file select field.
- false (default)
- true
sequential_disable: “Sequential Disable” is a term I use to describe my method of disabling form objects in sequence depending upon their values. For example, if a form field is empty, all fields below it are disabled automatically. Each field is enabled in sequence if the field before it has a value.
- true (default)
- false
pluggable: This option lets you plug-in to A Better Form with your own function. Instead of the using the default submit action, you can use your own function to handle the form data. A Better Form will automatically serialize the form data and send it back to your function. From there you can parse it, validate it, submit it, or whatever.
serialized: This disables the form serialization for the pluggable option.
- true (default)
- false
filtertext: Apply text filters to each text field or text area.
- true (default)
- false
textfilters: A comma separated list of filters which will be automatically removed from text fields as the user types. Here is the default filters setting:
- ‘url=,link=,http:,www.,href,

There are two classes which are associated with A Better Form:

absubmit – This class must be used to define the form submit button object. The submit button can be any object provided you assign it this class. See the examples tab.
aboptgroup – This class must be used for the html optgroup tag because the optgroup label is defined in the id attribute. See the examples tab.

Here is a working demonstration: http://jasonlau.biz/jquery.abetterform/

Here is the easiest method for using A Better Form:

$("#form-container").abform();

Here is an example of how a form can be coded:

Email:

Comment:

As you can see, there is no form tag. Instead, I have used a div tag with the id form-container for example.
In each of my form elements, I used the id attribute instead of using the name attribute.
The submit button is actually a push button with the required class absubmit.
You can use any element you want for the submit button as long as you give it the class absubmit.

And now the javascript code for A Better Form:

If you use the optgroup tag in select menus, use the id attribute in place of the label attribute. Also, it must be assigned the class aboptgroup.

The pluggable option allows you to plug-in to A Better Form with your own callback function. The form data is automatically (and optionally) serialized and sent back to your function for processing.
Here is an example of using the pluggable option:

In this example, instead of submitting the form when the form button is clicked, A Better Form serializes the form data and sends it to the custom callback function named myFunction.

A Better Form is known to have the following issues:

All form fields within the specified object are affected by A Better Form. This means that you should not attempt to nest forms inside each other. For example, do not place a Pay-Pal button inside the same object you are using A Better Form on or neither the Pay-Pal button or the form will function properly. Keep the forms separate.
jQuery does not serialize the File form field, so when using multipart forms, be sure to set the serialized option to false.

Please report any errors or other issues by using the Contact Form.

Vice Versa – Convert Pages To Posts And Vice Versa – WordPress Plugin

Jason — Wed, 03 Mar 2010 03:17:17 +0000

Vice Versa is a plugin I wrote for WordPress. Vice Versa allows you to easily convert WordPress Posts to Pages and Pages to Posts. You can also assign a Page or Post a parent or category(s) as you are converting from one to the other. Vice Versa is easy to install and use.

Download Vice Versa:
Version 1.0

Installation:

Unzip vice-versa.zip.
Upload the folder named ‘vice-versa’ to the wp-content/plugins directory on your server.
Go to the plugins manager in your Wordpress Dashboard, locate Vice Versa in the list of plugins (under ‘V’ for ‘Vice Versa’), and click Activate.
Done!

No database tables are affected and there are no additional settings required for the plugin to work.

Once the plugin is activated, you will find Vice Versa in the Dashboard menu under Settings.

Screenshot:

Vice Versa Screenshot

Spam-less And Robot-less Forms With jQuery

Jason — Sat, 27 Feb 2010 18:05:19 +0000

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.

Include jQuery in the HTML document’s section before the tag .
Add a
Create a div container for your form in your HTML document’s section before the tag.
Make a form inside the form-container div following these simple rules.
1. When you make your form do not include the
  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.
Email:
Comment:
After the form is assembled, go back to the section where the script for the form will be placed.
Make a jQuery javascript block which will call jQuery on page load. The form script will be placed where noted in the script below.
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;
}
};
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(‘
Please enter a valid email address.
’);
}

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’);
}
});
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',' 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!
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(‘’);
alert(‘Your comment has been submitted!’);
$(“#comment-form”).submit();
});
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:

JasonLau.biz Robot-less And Spam-less Forms With jQuery

Email:

Comment:

SwishMax Dynamic Right-Click Context Menu Example

Jason — Sat, 19 Dec 2009 14:00:22 +0000

Right-Click Image For Music Playlist And Player Controls

In this SwishMax 3 example, I have created a dynamic right-click context menu on-the-fly from a playlist array. Each context menu item has a unique function assigned to it. I do this by utilizing the context menu item’s caption.

I made an opensource music player which utilizes my dynamic context menu idea as an example. The SwishMax 3 swi is attached to this post.

Attached File(s) dynamic_context_menu_playlist.swi ( 16.72K )