|
Stopping form submissions containing HTML code |
||||||||
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:
First things first, let's create a custom validation rule to detect our html elements.
2$(document).ready(function(){
3
4 $.validator.addMethod("findhtml", function(value, element) {
5
6 var commentclean = true,
7 disallowed = ['<', 'http'];
8
9 for (var i=0, len = disallowed.length; i<len; i++) {
10 if (element.value.indexOf(disallowed[i]) != -1) {
11 commentclean = false;
12 break;
13 }
14 }
15
16 return this.optional(element) || ( commentclean );
17
18 }, "* match the string");
19
20});
21</s/cript>
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.
2 <s/cript type="text/javascript">
3 $(document).ready(function(){
4 $("#form").validate({
5
6 rules: {
7 name: {required: true},
8 email: {required: true},
9 tel: {required: false},
10 message: {required: true, findhtml: true}
11 },
12
13 messages: {name: "Please enter your Name",
14 email: "Please enter a valid email address",
15 tel: "",
16 message: {required: "Please enter a message", findhtml: "You cannot enter HTML in this field"}
17 }
18
19 });
20 });
21 </s/cript>
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/
It likely is a bit strong, but I thought I'd try and cover the widest range of potential HTML input and http requests and img tags seem to be the most submitted as spam. By trapping http and < it seems to have the most anti spam impact for the least technical disruption.
You could implement a third party API or a full Regex but with the level of spam reduction I've seen from this I think it works well enough :-)