|
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/
|
JQuery Countdown timer Plugin example |
||||||||
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.
|
Forcing the dollar ($) Namespace within your JQuery functions |
||||||||
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.
|
Dynamically tagging content with Keywords using JQuery |
||||||||
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.
