Basic Form Validation Using The jQuery Validation Plugin

Form validation is a very important part of any web application. You have to make sure that your users are going to enter a numerical value when they put data into a quantity field (You don’t want them to enter “one” into a quantity field, unless of course you want to try and handle that kind of input). However it goes much deeper than just requiring a number. You have phone numbers, URL’s, email addresses, numbers that can’t be negative. It goes on and on.

jQuery has a plug in that will handle all your form validation needs. It is called the jQuery Validation Plugin. It is once of the earliest plug ins that were developed for jQuery. What it allows you to do is define what form elements needs to be validated, how to validate the element, and what to do if the element is invalid.

This post has an accompanying demo that can be found here.

Hot Linking The jQuery Validation Plugin

Microsoft allows hot linking of the Validation Plugin so you do not have to host the library. The URL of the plugin is: http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.min.js

Basic Validation

This form has very basic validation. It is ideal if you want quick and dirty validation of a form. All you have to do is put your validation rules into the class attribute for your form input elements (there are some other elements that these can go into). The form is automatically validated when the form submit button is clicked, but before the form is actually submitted.

In the example, the required value in the class attribute specifies that the field is required. Any value inside of the element is acceptable. It just cannot be blank. The email value in the class attribute requires that the value in the input field be an email address. The url value in the class attribute requires that the value in the input field be formatted as an URL (complete with the http:// at the beginning)

Some of the basic validation can take place outside of the class attribute. These tend to go inside of their own attributes on the input element. For example, the minlength attribute. The minlength attribute, specifies that the input tag be a specific length.

Use jQuery To Disable Right Clicking On Your Page

Let me be clear about one thing before we begin. I think that doing this is obnoxious. If you really think you can achieve something by stopping right clicking, you are wrong. If someone wants to get to something on the right click, they will find a way around it.

Having said that, jQuery makes it extremely easy to disable right clicking on your pages. All you have to do is enter the following code:


$(document).ready(function(){
  $(document).bind("contextmenu",function(e){
    return false;
  });
});

Use jQuery To Detect What Browser Your Users Are Using

jQuery has the ability to identify what browser your users are using to visit your site.  It may be more useful to use CSS conditional comments to detect a browser, jQuery makes it very easy:


if( $.browser.safari ) {
  alert('You are using Safari');
} else if( $.browser.msie && $.browser.version > 6 ) {
  alert('You are using a modern version of Internet Explorer');
} else if( $.browser.msie && $.browser.version <= 6 ) {   alert('You really really need to upgrade your browser'); } else if( $.browser.mozilla && $.browser.version >= "1.8" ) {
  alert('You are using Firefox version greater than 1.8');
}

Save Your Bandwidth! Let Google Host Your jQuery Library

It may not be widely known, but Google has been hosting several JavaScript libraries on Google Code and jQuery is one of those libraries. This has a few different advantages to allowing Google to host this file for you including:

  • It is hosted on Google.  Your bandwidth is not taken up by loading the library
  • Google can probably serve us the file faster than your server.  Especially if you are on a shared hosting solution
  • If your user has been to a site that uses the library from Google, they have already cached it.

Using the Google’s library is incredibly simple.  All you have to do is use the following code to include the jQuery library from Google:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>

iPhone Style Checkboxes with jQuery

With the popularity of the iPhone, many plugins exist to replicate the functionality of the iPhone operating system.

Today I will talk about a plugin I stumbled upon. It replaces all checkboxes with a checkbox that is styled to match the iPhone.

I have put together a very basic demo of this plugin. You may view it here.

You can download this plugin from http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html