Blog of Shaun McCran - Architecting robust, elegant technical and business solutions - JQuery

Stopping form submissions containing HTML code

Mon, 15 Jul 2013 06:10:00 -0000

Are you getting web form spam? I was, mainly from bots, or 'copy and paste' farms where users sit and paste bulk code into your forms. Mostly these contain links or image tags. Rather than compromise the form usability for genuine users I decided to fix my spam issue with a little more tact than you may usually find, such as in the case of Captcha devices.

I'm already cleaning html code submissions on the server side but why not make things even more informative for my users and tell them up front that their HTML isn't appreciated.

I didn't want a complicated Regex or pattern matching plugin, I simply wanted to detect key HTML elements and tell the user that it wasn't going to be accepted by the form. This code uses the JQuery plugin for form validation. You can get it here:

http://jqueryvalidation.org/

First things first, let's create a custom validation rule to detect our html elements.

$(document).ready(function(){ $.validator.addMethod("findhtml", function(value, element) { var commentclean = true, disallowed = ['<', 'http']; for (var i=0, len = disallowed.length; i

~~This creates an array of disallowed elements and loops through them when the rule is invoked.~~

~~Secondly we will use this rule in our validation routine when a user tries to submit the form.~~

$(document).ready(function(){ $("#form").validate({ rules: { name: {required: true}, email: {required: true}, tel: {required: false}, message: {required: true, findhtml: true} }, messages: {name: "Please enter your Name", email: "Please enter a valid email address", tel: "", message: {required: "Please enter a message", findhtml: "You cannot enter HTML in this field"} } }); }); The key line here is: message: {required: true, findhtml: true}

~~This invokes our previously created validation rule.~~

~~In this way the user is told 'You cannot enter HTML in this field'. A friendly validation message that clearly shows WHY the form isn't going to work.~~

~~You can see this working on my contact form here : http://www.mccran.co.uk/contact/~~

Using JQuery to check Radio button selections

Mon, 13 Feb 2012 03:03:00 -0000
Ever wanted to check if a user has checked at least one option from a series of radio fields? JQuery makes this super simple, here's how to do it: [More]

JQuery Countdown timer Plugin example

Thu, 09 Feb 2012 07:54:00 -0000
I'd previously used a JavaScript script to count down from a now() to a given date to display real time count down information on screen. I was cleaning up the project it was used on and wondered how easy it would be to push all the 'normal' JavaScript into a JQuery plugin and encapsulate it all into one function call. [More]

JQuery auto resize input field Plugin example

Mon, 06 Feb 2012 07:13:00 -0000
I was looking for a simple way to make an existing Text Area form field expand as-and-when a user fills in enough information to reach to bottom edge of the form element. James Padolsey has written a great little Auto resize function, you can get it from Github here: https://github.com/padolsey/jQuery.fn.autoResize. The documentation in the example included with the download above is pretty good, but I've put up an example of it working here as well: JQuery Auto resize Textarea plugin example

Forcing the dollar ($) Namespace within your JQuery functions

Mon, 06 Feb 2012 03:57:00 -0000
Whilst documenting some Open Source platforms for an upcoming project I found that several of the larger more prominent Open Source software solutions perform some subtle tweaks to included JavaScript libraries. In this case JQuery. This is a short post on ho to ensure that the $ character always represents the JQuery library in your framework. [More]

Dynamically tagging content with Keywords using JQuery

Wed, 01 Feb 2012 08:22:00 -0000
I've used a ticketing system called Lighthouse App for a while now, and one of the features I really like about it is its ability to tag content with keywords in a very easy and obvious fashion. If you have ever wanted to tag an article or some content with a list of Keywords then this blog article is for you. [More]

Simple JQuery Google Analytics tracking object

Wed, 11 Jan 2012 09:07:00 -0000
Each time I build a new project I find myself adding in several common objects from a variety of languages. One of those objects is a JavaScript based Google Analytics tracking object. [More]

Book review: JQuery Mobile – a first look

Thu, 05 Jan 2012 03:31:00 -0000
I was recently sent a copy of JQuery Mobile by Packt publishing for review. I've dabbled in the JQuery Mobile development language a fair amount, so I was interested to see what this book could teach me that may be different from the information out there in the community. [More]

FancyBox JQuery plugin reborn as FancyApps

Wed, 14 Dec 2011 07:29:00 -0000
I'm a big fan of the fancybox plugin. It is a very flexible JQuery lightbox plugin that has met every project requirement I've ever needed a lightbox for. It also has a great library of events attached to it that have fit most of the User Interfaces I've ever used it in. The fancybox plugin has matured into version 2 and been re-badged slightly as part of the fancyApps suite. It has to be one of my top ten recommended JQuery plugins. http://fancyapps.com/fancybox/
Licensing changes
I've since found that the new version of fancybox (2) has had a license change. Version 1 is licensed under both MIT and GPL licenses (http://docs.jquery.com/Licensing) but version 2 is 'Creative Commons Attribution-NonCommercial 3.0' and requires an $89.00 fee for commercial use, as discussed here in a Google Group: http://groups.google.com/group/fancybox/browse_thread/thread/fc4467bf0bf3ef6d/3edff176327fed35?lnk=gst&q=license#3edff176327fed35

Using URL hashes to control AJAX requests

Thu, 20 Oct 2011 13:53:00 -0000
Following on from my previous article here (http://www.mccran.co.uk/index.cfm/2011/10/17/Adding-hash-values-into-URLs--The-basics) this article deals with injecting Hash values into URL's and using them to power AJAX requests. Starting with the code of the previous article I'll expand it to include an AJAX request based on the Hash inserted into the URL. [More]

Adding hash values into URLs - The basics

Mon, 17 Oct 2011 15:26:00 -0000
Building a site that uses AJAX to Asynchronously import content into it? You can take advantage of the URL hash value and some of the functionality it gives you. By inserting a hash character into the URL you can pick up the string following it and use it as a value in AJAX requests. Also you can create a listener event to check for a hash being added to a URL and use that to activate your custom JavaScript. This blog entry is an intro to this process, where we deal with adding the hash value into a URL. [More]

Using JQuery to dynamically add form fields to a page

Thu, 18 Aug 2011 14:51:00 -0000
I'd seen a few different ways of dynamically adding form fields to a web page but hadn't ever tried it. I was interested in seeing how exactly you can do this at a technical level, but also how you can manage the users interactions, allowing them to keep adding fields as they complete the previously added ones. [More]

Super small JQuery / JavaScript image mouseover script

Tue, 16 Aug 2011 14:23:00 -0000
I've been developing more and more rich content using JQuery / JavaScript and today I spent a little time researching and putting together an image mouseover script. Sure, there are loads of them already, but I really wanted to see how compact and efficient I could get this simple bit of functionality. [More]

Simple JQuery way to detect links pointing to external domains

Wed, 27 Jul 2011 14:11:00 -0000
Ever wanted to detect links on your site that point to other domains? A few times in the past I've had requests to be able to pick out all the hyperlinks from a site that move a user to a different domain. [More]

Book review: jQuery 1.4 Animation Techniques: Beginners Guide

Tue, 21 Jun 2011 03:23:00 -0000
This is a review of a book that Packt Publishing (http://www.packtpub.com/) have just sent me: JQuery titles, jQuery 1.4 Animation Techniques: Beginners Guide.
[More]