|
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/
|
Using JQuery to check Radio button selections |
||||||||
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:
|
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.
|
JQuery auto resize input field Plugin example |
||||||||
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:
