How to validate Date of Birth with jQuery

March 9, 2009 13 comments

In a recent project I had to implement what’s commonly referred to as a Legal Drinking Age (LDA) page. Basically what needs to happen is that the user has to enter their date of birth and thus ‘confirm’ that they are of a legal drinking age for their respective country. You can view an example of just such a page here.

This brought me to an interesting requirement – the user needs to enter their birth of date (in this case via 3 select boxes), their age then needs to be calculated from the entered date and they are either granted, or denied access based on the result.

Interestingly enough, after having a quick look around I hadn’t been able to find any similar example, so I had to come up with something myself. The following code is my solution :

$(“#lda-form”).submit(function(){
var day = $(“#day”).val();
var month = $(“#month”).val();
var year = $(“#year”).val();
var age = 18;

var mydate = new Date();
mydate.setFullYear(year, month-1, day);

var currdate = new Date();
currdate.setFullYear(currdate.getFullYear() – age);
if ((currdate – mydate) < 0){ alert("Sorry, only persons over the age of " + age + " may enter this site"); return false; } return true; }); [/sourcecode] First, we get the relevant entered date values - the “day”, “month” and “year”. I’ve also added an “age” var so that this can be easily edited if necessary – the current value is set to 18.

Next we create a Date object and call it “mydate”. We then use the object’s “setFullYear” method to set the value of “mydate” to the user’s entered birth date. You can view more information about this method here. The only thing to notice here is that we have subtract 1 from the “month” value as it’s 0 indexed.

Now that we have the user’s birth date sorted, we then create another Date object and call it “currdate”. The default value for “currdate” is the current date. We then set “currdate” to whatever the current date is minus our “age” value – i.e. Today – 18 years. Once again, we use the “setFullYear” method to set the date. However, to get the current date in a useable format, we use the “getFullYear” method and THEN subtract 18 from the resulting value. So to do this we use “currdate.getFullYear() – age”.

Once we have the date of 18 years ago and the user’s birth date, both in the same format, it’s simply a matter of making sure that the required date minus the birth date isn’t greater than 0. If so, we output an alert to inform the user then return “false” to make sure that the form doesn’t get submitted.

Pretty straightforward.

Advertisements
Categories: Uncategorized

Still alive and kicking

February 17, 2009 Leave a comment

Wow, what a crazy 6 weeks I’ve just had. Probably the busiest, most stressful and yet most rewarding stretch of my entire working career.

With that said, this is just a quick note to tell anyone out there who actually cares that I’m still alive, still kicking and will resume posting to this fascinatingly entertaining and informative blog shortly.

Categories: General Tags: , ,

jQuery plugin : jqPageFlow – scrolling pagination made easy

January 18, 2009 26 comments

jqPageFlow

Simply put, this plugin makes the scrolling pagination found on sites like dzone.com and Google Reader easy to implement on your site.

A working demo is viewable here

This is of course all configurable, and intended to be used on an automatically generated page using a backend script (eg php).

Please note that this script is still currently in beta, so if you find any problems please post a bug submission to http://code.google.com/p/flexidev/issues/ with as much information as possible

Usage

  1. Download the latest source code from the repository : http://code.google.com/p/flexidev/downloads
  2. Include the jQuery library into your page header (this plugin supports both jQuery v1.2.6 and v1.3)
  3. Include the jquery.jqpageflow.js file into your page header
  4. Include the supplied css file in your page header : modify as you see fit
  5. View the source of this page: copy, paste and modify the javascript block as required. Use $(“body”).jqpageflow(); to use defaults.
  6. Create a php/.net/perl/python etc backend script to handle the serverside stuff – see the index.php file (this page) included in the download source for a basic example

Features

  • Compatable with jQuery v1.2.6 and 1.3
  • Chainable
  • Configurable options : including the url to call, current page, pager var, container element etc
  • Server side platform independant : tell it how to interact with your backend scripts
  • Cross browser compatability, tested in FF 2.5+, Safari 3+ (more browsers to come soon)
  • Skinnable loader with CSS and customizable image path

Options

  • url: Specify which url (relative or absolute) the plugin should submit the ajax request to. Defaults to current window.location
  • currentPage: Gets appended to url as a GET value to help your backend script keep track of which page of results the user is on. Defaults to 0 (first page)
  • pagerVar: Related to currentPage, gets appended to url as a GET var to help your backend script keep track of which page of results the user is on (e.g. index.php?page=2). Defaults to “p”
  • perPage: Used for calculation and display purposes, tell the plugin how many results are being displayed per page. Defaults to 50.
  • totalResults: Tells the plugin when it needs to stop trying to look for more results. Defaults to 100
  • container: Specify which html element contains the result items, can be any jQuery compatible selector (eg “#mycontainer”, “.results”, “body”).
    Any html returned to the ajax call gets appended to this element. Defaults to “body”
  • loaderImgPath: Tell the plugin where to find the loader img relative to the page calling the plugin. Defaults to “images/loader.gif”
  • debug: When set to 1, the plugin will print debugging information to the console (firebug). Defaults to 0

Changelog

  • 18 Jan 2009 : version 0.1b released

Credits

How to use jQuery to select a radio button from parent element

January 9, 2009 4 comments

A friend asked me for some help on doing the following :
1. You have an unordered list – within each list item you have a radio input.
2. When you click on the list item (i.e. the entire container), it must a) select the radio input and b) add a css classname of “selected” to the list item.

You can find a demo here.

First, the html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<!-- include our jquery scripts -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
    <script src="js/radio.js" type="text/javascript"></script>
    <style type="text/css">
    	li { color: #000; }
    	li.selected { color: #FF0000; }
    </style>
</head>
<body>
	<div>
		<ul>
			<li class="test">Test 1 <input type="radio" name="test" /></li>
			<li class="test">Test 2 <input type="radio" name="test" /></li>
			<li class="test">Test 3 <input type="radio" name="test" /></li>
			<li class="test">Test 4 <input type="radio" name="test" /></li>
			<li class="test">Test 5 <input type="radio" name="test" /></li>
		</ul>
	</div>
</body>
</html>

There is nothing out of the ordinary here – just a simple unordered list of radio inputs.

Next, the js (radio.js) :

$(document).ready(function(){
	$('li').click( function(){
		$('li.selected').removeClass('selected');
		$(this).addClass('selected');
		$(this).children("input[type=radio]").click();
	});
});

1. First – we tell jQuery to execute the following code once the document has finished loading, ensuring that the DOM has been registered successfully.
2. Next we bind a click event to all list item elements on the page – you can of course change this to all list items with a class of “myselection” for example ( $(“li.myselection”).click… )
3. When a list item is clicked – we first need to remove the “selected” class from all other list items.
4. Now we need to add the “selected” class to the list item which fired the event ( $(this) ).
5. Finally, we need to make sure that the radio button inside the list item is “clicked” : we do this by using the .children() selector and executing a click() event on the input.

The important bit is the $(this).children(“input[type=radio]”) selector. What we’re doing here is telling jQuery to find all inputs of type radio (i.e. all radio inputs) inside “this” list item (i.e. the list item which was clicked on). We then use .click() to..as you guessed it… execute a click event on the returned element (in this case the radio input).

And that’s all there is to it. You can read up some more on jQuery selectors here.
I would also highly recommend reading the following article : Improve your jQuery – 25 excellent tips.

Jquery UI Layout Manager Plugin

December 31, 2008 Leave a comment

While working on my new framework the other day I came across this excellent Jquery Plugin : UI.Layout ā€“ The Ultimate Page Layout Manager.

What it does with minimal markup and some well written javascript is transform your html page into a professional pane based layout. Like most jQuery plugins, it’s incredibly simple to implement and through the use of CSS and a large number of options is highly customizable.

All in all, a very well rounded and executed use of the jQuery library. Kudos to Fabrizio.

You can check out some demos here

Search Engine Friendly URLs using PHP

December 11, 2008 5 comments

A little while ago I wrote a post on Django Inspired SEF urls. I’ve since put together a working example and am now making it available for download.

There are a couple of things to note :

  1. You’ll need to edit the necessary path and url info found inside index.php and .htaccess
  2. The sample code inside index.php is for demonstration purposes only – I strongly recommend using a proper gateway/bootstrap interface typically found in MVC based systems such as Zend Framework and CakePHP (though they of course have their own SEF url implementations).
  3. Edit urls.php to play around with the regular expressions. I’ll be the first to admit that my regexp skills are not the best in the world, so if you notice something that will work better, please let me know – I’d really appreciate it
  4. I’ve included a url generator inside the class to try and make your life easier – view index.php for example usage

That should do it. You can download the script here.

Please play around with it and if you make any improvements I’d love to hear about it.

Categories: PHP Tags: , , ,

Javascript / Jquery Bookmark script

November 3, 2008 28 comments

Ever needed to add a button or link to your site which allows the user to save your site to their bookmarks/favorites ?

Here’s just the script for you. Using jquery, it works in Firefox 2+(tested), IE 6 (not tested), IE7(tested) and Opera 7+ (not tested). Unfortunately not all browsers support the action, so a generic “alert” has been added to inform the user.

You can download the full script here and follow along if you’d like a further explanation of the code involved. A demo can be viewed here.

bookmark.js

The script itself is really very basic. Firstly what needs to happen is on page load, the script checks to see if the user is browsing the site with Opera. If so, we set the rel attribute of all our bookmark anchor tags (class=”jqbookmark”) to “sidebar” – this is a standard Opera technique for creating this type of link.

Next we add an event listener which will execute whenever an anchor tag of class “jqbookmark” is clicked. Simply put, it checks to see which browser is being used and executes the necessary code.

The nice thing here though is that you can set the script to bookmark any url with any title by specifying the href and title attributes respectively.

$(document).ready(function(){
	// add a "rel" attrib if Opera 7+
	if(window.opera) {
		if ($("a.jqbookmark").attr("rel") != ""){ // don't overwrite the rel attrib if already set
			$("a.jqbookmark").attr("rel","sidebar");
		}
	}

	$("a.jqbookmark").click(function(event){
		event.preventDefault(); // prevent the anchor tag from sending the user off to the link
		var url = this.href;
		var title = this.title;

		if (window.sidebar) { // Mozilla Firefox Bookmark
			window.sidebar.addPanel(title, url,"");
		} else if( window.external ) { // IE Favorite
			window.external.AddFavorite( url, title);
		} else if(window.opera) { // Opera 7+
			return false; // do nothing - the rel="sidebar" should do the trick
		} else { // for Safari, Konq etc - browsers who do not support bookmarking scripts (that i could find anyway)
			 alert('Unfortunately, this browser does not support the requested action,'
			 + ' please bookmark this page manually.');
		}

	});
});

Demo.html

The html is straightforward. We include our two scripts (jquery and jqbookmark) and we add our links to the page. As mentioned above – the links need to have a class attribute with the value of “jqbookmark”, all other links will be ignored by the script.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<!-- include our jquery scripts -->
    <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
    <script src="js/jqbookmark.js" type="text/javascript"></script>
</head>
<body>
<div>
<ul>
	<li><a href="http://www.google.com" title="Google.com" class="jqbookmark">Google bookmark</a></li>
	<li><a href="http://www.yahoo.com" title="Yahoo search engine" class="jqbookmark">Yahoo bookmark</a></li>
	<li><a href="https://calisza.wordpress.com" title="A wonderful Blog" class="jqbookmark">Blog bookmark</a></li>
	<li><a href="http://www.microsoft.com" title="Microsoft">Will not be bookmarked</a></ul>
</div>
</body>
</html>

I’d love to know if this functionality could be expanded to include Safari, but so far my good friend google has come up with nothing. At the very least, I hope that someone can find this script useful.