Usage

//assuming http://www.example.com/index/?foo=bar&baz=baa#test=true

url.href;
//returns http://www.example.com/index/?foo=bar&baz=baa#test=true

url.path
//return /index/?foo=bar&baz=baa#test=true

url.get('foo');
//returns 'bar'

url.get('test');
//returns true

Script

var url = (function(){
	var _href = location.href;
	var _path = location.pathname;
	var _qs = location.search.replace(/\?/, '');
	var _hash = location.hash.replace(/\#/, '');

	var _parse = function(string){
		var params = string.split('&');
		var holder = [];

		for(var i = 0; i < params.length; i++){
				var temp 	= params[i].split('=');
				var key 	= temp[0];
				var val 		= temp[1];
				holder[key] = val;
		}
		return holder;
	};

	var _qs_params 	= _parse(_qs);
	var _hash_params = _parse(_hash);

	return {
		href:_href,
		path:_path,
		get:function(name){
			var retval = null;
			if(_qs_params[name] !== undefined){
				retval = _qs_params[name];
			} else if(_hash_params[name] !== undefined) {
				retval = _hash_params[name];
			}
			return retval;
		},
		go:function(loc){
			location.href = loc;
		},
		back:function(item){
			if(item !== undefined){
				item = -1;
			}
			history.go(item);
		}
	};
})();

Check your error log at:

tail -f /Applications/XAMPP/xamppfiles/logs/error_log

Start apache and see if you get an error regarding nodename or hostname

In terminal again, run the following command:

ping $(hostname)

If you get no response, then your hostname is not bound to your IP address, and apache doesn’t like that. Here is how you fix it:

echo "127.0.0.1 " $(hostname) | pbcopy

Open your /etc/hosts file and paste your clipboard contents in, restart apache and it should be working fine.

• they utilize browser plugins like Flash
• are enormously cumbersome to use with too many configuration options,
• and once again, only store strings.
• no unit tests
• buggy
• did I mention they are cumbersome to use and only hold strings????

So, I have set out to resolve these grievances and have come quite close with jsper. JSPER is a wrapper class around local storage that provides a more friendly api to localStorage using simple get and set methods:

jsper.set('foo', {bar:'baz',boz:{bez:'biz'}});
//jsper.get returns the type of object you gave it; in this case, an object
var my_object = jsper.get('foo');

jsper.set('arr', ['a', 'b', 'c', 'd']);
// returns an array
var my_array = jsper.get('arr');

In addition to automatic serialization/deserialization, there are a number of other useful methods, most of which (non-getters) are chainable, overloaded and accept callbacks. Jstore allows you to inspect the current storage engine, force a different storage engine (including session-lifetime storage).

Iterating over a collection

// set an array in storage
jsper.set('an_array', ['This', 'is', 'pretty', 'cool']);
var message = "";
// perform iteration, data is the stored value and index is numerical index
jsper.each('an_array', function(data, index){
   message += " "+data;
});
console.log(message);//outputs: "This is pretty cool"

Lots more information @github: http://github.com/rmcvey/jsper
Also, I made it into a jquery plugin if you are into that sort of thing:

Zip RAR

Sign Up

Apply for a Google Maps API Key (free) here using your domain without a subdomain or www (this will allow you to use key with or without www and on subdomains): http://code.google.com/apis/maps/signup.html

Configuration

Put the API key in your configuration file (application.ini, config.ini, etc.) like this:

[google]
google_map_key =  YOUR_KEY

Bootstrapping

In your index.php file, add the following code:
As a concerned user pointed out, that is terrible practice and was a remnant of my first tinkerings with ZF. You should place this code in your Bootstrap.php file:

protected function initGoogle(){
	defined('CONFIG_PATH') or define('CONFIG_PATH', APPLICATION_PATH . '/configs/application.ini');
	Zend_Registry::set('google',  new Zend_Config_Ini(CONFIG_PATH, 'google'));
}

This will add your api key to the registry so that it can be accessed throughout your application.

Model

In your models directory, create a new class called ‘Geocoder.php’. This will be the file that contains the application logic for retreiving coordinates on a given location.

models/Geocoder.php

class Geocoder{
    protected $key;

    public function __construct($api_key)
    {
        $this->key = $api_key;
    }

    public function _getGeocodedLatitudeAndLongitude($address)
    {
        $client = new Zend_Http_Client();
        $client->setUri($this->getGeocodingUri());
        $client->setParameterGet('q', urlencode($address))
               ->setParameterGet('output', 'json')
               ->setParameterGet('sensor', 'false')
               ->setParameterGet('key', $this->key);

        $result = $client->request('GET');
        $response = Zend_Json_Decoder::decode($result->getBody(),
                    Zend_Json::TYPE_OBJECT);
        return $response;
    }

    public function getCoordinates($address)
    {
        $response = $this->_getGeocodedLatitudeAndLongitude($address);
        if(isset($response->Placemark[0]->Point->coordinates[1])){
             return array(
                'lat' => $response->Placemark[0]->Point->coordinates[1],
                'lon' => $response->Placemark[0]->Point->coordinates[0]
            );
        } else {
			return null;
		}
    }

    private function getGeocodingUri()
    {
        return 'http://maps.google.com/maps/geo';
    }
}
?>

Usage

Alright, that was pretty easy. Now we just have to implement this in our controller. Here is a sample model that uses the Geocoder class to return geotagged User objects.
models/User.php

class User extends Zend_Db_Table_Abstract{
	protected $_name = 'users';
	protected $key;
	protected $geocoder;

	public function init()
	{
		$this->key = Zend_Registry::get('google')->google_map_key;
		$this->geocoder = new Geocoder($this->key);

	}
	public function getUsersAndGeocode()
	{
		$result = $this->fetchAll();

		$users    = $result->_toArray();
		foreach($users as $user)
		{
			$address = "{$user['address']} {$user['city']} {$user['state']} {$user['zip']}";

			$latlon = $this->geocoder->getCoordinates($address);
			if($latlon)
			{
				$user['lat'] = $latlon['lat'];
				$user['lon'] = $latlon['lon'];
			}
		}
		return $users;
	}

}
?>

The controller part is a little too easy. We will setup a reference to our user table and create a map action. Within the map action we get all of users and geocode them. We pass that collection to our view. This file should be located here:
controllers/UserController.php

class UserController extends Zend_Controller_Action{
	protected $user_table;
	public function init()
	{
		//database connectivity stuff is up to you

		$this->user_table = new User();
	}
	public function mapAction()
	{
		$this->view->api_key = Zend_Registry::get('google')->google_map_key;
		$users = $this->user_table->getUsersAndGeocode();
		$this->view->users = $users;
	}
}
?>

And finally, the view. Here we will create our map div, load the Google Maps API (don’t forget to sub out your key in the script src). We are using a custom marker here (personIcon); you can add your own image here by changing the path to your image. I recommend the image be pretty small with a transparent background. Given our current setup, this file would be located at this path:
views/scripts/user/map.phtml

<div id="map">

<noscript>
<center>
<strong>To view the map feature, you need to have Javascript enabled. If you are unsure about how to turn Javascript support on, please</p>
<p>read Google's instructions found here: <a href="https://www.google.com/support/adsense/bin/answer.py?hl=en&amp;answer=12654" target="_blank">LINK</a></strong>
</center></p>
<p></noscript>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;sensor=false&amp;amp;key=<?=$this->api_key?>"></script>

<script type="text/javascript">
 //Sorry, I love jquery! If you don't use window.onload = function(){initialize();}
    $(document).ready(function(){
        initialize();
    });
var map;
var personIcon;
function initialize() {
    if(GBrowserIsCompatible){

        map = new google.maps.Map2(document.getElementById("map"));
        map.setUIToDefault();
        map.setCenter(new google.maps.LatLng('48.858001709', '2.29460000992'), 4);

        personIcon            = new GIcon();

		/**
		* Change this marker to be a small transparent custom image
		*
		*/
        personIcon.image      = '/img/common/custom_marker.png';
        personIcon.shadow     = "http://www.google.com/mapfiles/shadow50.png";
        personIcon.iconSize   = new GSize(32,32);
        personIcon.shadowSize = new GSize(37,34);

        personIcon.iconAnchor = new GPoint(9,34);
        personIcon.infoWindowAnchor = new GPoint(9,2);
    }
    addOverlays(map);
}

function personMarker(point, index, dto){
 //set our marker to be the custom icon we created
    markerOptions = {icon:personIcon};
    var marker = new GMarker(point, markerOptions);

/**
 * This is the content in the info bubble
 */
    GEvent.addListener(marker, 'click', function(){
       marker.openInfoWindowHtml(
            '<h3><a href="/profile/view/'+dto.user_id+'">'+dto.user_first+' '+ dto.user_last+'</a></h3>'+
            dto.user_address+' '+dto.user_city+' '+dto.user_state+' '+dto.user_zip
        );

    });
    return marker;
}
/*
* Here is where we loop through our users and create new markers for each

*/
function addOverlays(map){
    <?php
  $geo = $this->users->_toArray();
        $size = sizeof($geo);

 ?>
    <? for($i = 0; $i < $size; $i++): ?>
                var latLon = new GLatLng(<?php echo $geo[$i]['lat'];?>, <?php echo $geo[$i]['lon'];?>);

                map.addOverlay(personMarker(latLon, <?=$i?>, <?=Zend_Json::encode($geo[$i])?>));
    <?php endfor; ?>
}
</script>

Post a comment if you have any questions

<html>
	<head>
		<title>Keyboard Tabs</title>
		<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
		<script type="text/javascript" src="http://js-hotkeys.googlecode.com/files/jquery.hotkeys-0.7.9.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
                //initialize tabs
				$tabs = $('#tabs').tabs();
                //create a reference to our document
				var this_document = $(document);
                //nothing fancy, just iterate over a number set and generate the shortcuts
				$.each([1,2,3,4,5,6,7,8,9], function(index){
					this_document.bind('keydown', 'alt+'+index, function(e){
						 $tabs.tabs('select', (index - 1));
						 e.preventDefault();
					 });
				});
			});
		</script>
	</head>
	<body>
		<div class="demo">

		<div id="tabs">
			<ul>
				<li><a href="#tabs-1">Nunc tincidunt</a></li>
				<li><a href="#tabs-2">Proin dolor</a></li>
				<li><a href="#tabs-3">Aenean lacinia</a></li>
			</ul>
			<div id="tabs-1">
				<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
			</div>
			<div id="tabs-2">
				<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
			</div>
			<div id="tabs-3">
				<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
				<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
			</div>
		</div>

		</div><!-- End demo -->

		<div style="display: none;" class="demo-description">

		<p>Click tabs to swap between content that is broken into logical sections.</p>
		</div>
	</body>
</html>

If you missed the part that did the shortcuts, here it is again:

$(document).ready(function(){
                //initialize tabs
				$tabs = $('#tabs').tabs();
                //create a reference to our document
				var this_document = $(document);
                //nothing fancy, just iterate over a number set and generate the shortcuts
				$.each([1,2,3,4,5,6,7,8,9], function(index){
					this_document.bind('keydown', 'alt+'+index, function(e){
						 $tabs.tabs('select', (index - 1));
						 e.preventDefault();
					 });
				});
			});

That’s it! If you have any questions, please post!

function winOpen(url:String, winName:String, wide:Number, high:Number, chrome:Boolean, centered:Boolean)
{
//Chrome on window un-centered
if (chrome == true && centered == false)­
{
getURL("javascript:"+winName+"=window.open('"+url+"', '"+winName+"', 'width="+wide+",height="+high+",left=0,top=0,toolbar=1,location=1,scrollbars=1,status=1,resizable=1,fullscreen=no'); "+winName+".focus(); void(0);");
}
//Chromeless un-centered
else if (chrome == false && centered == false)­
{
getURL("javascript:"+winName+"=window.open('"+url+"', '"+winName+"', 'width="+wide+",height="+high+"'); "+winName+".focus(); void(0);");
}
//Chrome on, centered
else if (chrome == true && centered == true)
{
getURL("javascript:"+winName+"=window.open('"+url+"', '"+winName+"', 'width="+wide+",height="+high+",left=0,top=0,toolbar=1,location=1,scrollbars=1,status=1,resizable=1,fullscreen=no'); "+winName+".focus(); screen_height = window.screen.availHeight;screen_width = window.screen.availWidth; left_point = parseInt(screen_width/2)-("+wide+"/2); top_point = parseInt(screen_height/2)-("+high+"/2); setTimeout('"+winName+".moveTo(left_point,top_point)',10); void(0);");
}
//Chromeless, centered (most popular!)
else if (chrome == false && centered == true)
{
getURL("javascript:"+winName+"=window.open('"+url+"', '"+winName+"', 'width="+wide+",height="+high+",left=0,top=0,toolbar=no,location=no,scrollbars=no,status=no,resizable=no,fullscreen=no'); "+winName+".focus(); screen_height = window.screen.availHeight;screen_width = window.screen.availWidth; left_point = parseInt(screen_width/2)-("+wide+"/2); top_point = parseInt(screen_height/2)-("+high+"/2); setTimeout('"+winName+".moveTo(left_point,top_point)',10); void(0);");
}
}

//Sample of application, requires a button with instance name of button_mc on stage
button_mc.onRelease = function()
{
winOpen("http://www.bitconsultants.net/", "MyWindow", 350, 350, true, true);
­}

function winOpen(url:String, winName:String, wide:Number, high:Number, chrome:Boolean, centered:Boolean)
{
    //Chrome on window un-centered
    if (chrome == true && centered == false)­
    {
        getURL("javascript:"+winName+"=window.open('"+url+"', '"+winName+"', 'width="+wide+",height="+high+",left=0,top=0,toolbar=1,location=1,scrollbars=1,status=1,resizable=1,fullscreen=no'); "+winName+".focus(); void(0);");
    }
    //Chromeless un-centered
    else if (chrome == false && centered == false)­
    {
        getURL("javascript:"+winName+"=window.open('"+url+"', '"+winName+"', 'width="+wide+",height="+high+"'); "+winName+".focus(); void(0);");
    }
    //Chrome on, centered
    else if (chrome == true && centered == true)
    {
        getURL("javascript:"+winName+"=window.open('"+url+"', '"+winName+"', 'width="+wide+",height="+high+",left=0,top=0,toolbar=1,location=1,scrollbars=1,status=1,resizable=1,fullscreen=no'); "+winName+".focus(); screen_height = window.screen.availHeight;screen_width = window.screen.availWidth; left_point = parseInt(screen_width/2)-("+wide+"/2); top_point = parseInt(screen_height/2)-("+high+"/2); setTimeout('"+winName+".moveTo(left_point,top_point)',10); void(0);");
    }
    //Chromeless, centered (most popular!)
    else if (chrome == false && centered == true)
    {
        getURL("javascript:"+winName+"=window.open('"+url+"', '"+winName+"', 'width="+wide+",height="+high+",left=0,top=0,toolbar=no,location=no,scrollbars=no,status=no,resizable=no,fullscreen=no'); "+winName+".focus(); screen_height = window.screen.availHeight;screen_width = window.screen.availWidth; left_point = parseInt(screen_width/2)-("+wide+"/2); top_point = parseInt(screen_height/2)-("+high+"/2); setTimeout('"+winName+".moveTo(left_point,top_point)',10); void(0);");
    }
}

//Sample of application, requires a button with instance name of button_mc on stage
button_mc.onRelease = function()
{
    winOpen("http://www.bitconsultants.net/", "MyWindow", 350, 350, true, true);
­}

CSS

.norm{
color:#fff;
background-color:#000;
}

.alt{
color:#000;
background-color:#fff;
}

PHP Code:

<?php

$style = 0;//switch to know which row we are on
echo '<table>';
while($row = mysql_fetch_array($query))
{
$name = $row['name'];//for each corresponding column name you wish to show
$add   =  $row['address'];
$email = $row['email'];

if($style == 0)
{
echo '<tr class="norm">';
echo '<td>'.$name.'</td>';
echo '<td>'.$add.'</td>';
echo '<td>'.$email.'</td>';
echo '</tr>';
$style++;
}else{
echo '<tr class="alt">';
echo '<td>'.$name.'</td>';
echo '<td>'.$add.'</td>';
echo '<td>'.$email.'</td>';
echo '</tr>';
$style--;
}
}
echo '</table>';

?>

That’s all, not much to it really.

Edit: It should be stated that this could be accomplished in a much more simple manner using the ternary operator to conditionally set the class, here is what that would look like:

<?php

$style = 'norm';//switch to know which row we are on
echo '<table>';
while($row = mysql_fetch_array($query))
{
$name = $row['name'];//for each corresponding column name you wish to show
$add   =  $row['address'];
$email = $row['email'];
echo '<tr class="'.$style.'"> ';
echo '<td>'.$name.'</td>';
echo '<td>'.$add.'</td>';
echo '<td>'.$email.'</td>';
echo '</tr>';
$style = ($style == 'norm') ? 'alt' : 'norm';
}
echo '</table>';

?>

Add it to your form element by using:

<input type="text" id="state_search"  />
<input type="hidden" name="state" />
...
<script type="text/javascript">
$('#state_search').states();
</script>

Here is the list and the jQuery function:

var state_autocomplete = [
{full:"Alabama",abbr:"AL"},
{full:"Alaska",abbr:"AK"},
{full:"Arizona",abbr:"AZ"},
{full:"Arkansas",abbr:"AR"},
{full:"California",abbr:"CA"},
{full:"Colorado",abbr:"CO"},
{full:"Connecticut",abbr:"CT"},
{full:"Delaware",abbr:"DE"},
{full:"District of Columbia",abbr:"DC"},
{full:"Florida",abbr:"FL"},
{full:"Georgia",abbr:"GA"},
{full:"Hawaii",abbr:"HI"},
{full:"Idaho",abbr:"ID"},
{full:"Illinois",abbr:"IL"},
{full:"Indiana",abbr:"IN"},
{full:"Iowa",abbr:"IA"},
{full:"Kansas",abbr:"KS"},
{full:"Kentucky",abbr:"KY"},
{full:"Louisiana",abbr:"LA"},
{full:"Maine",abbr:"ME"},
{full:"Maryland",abbr:"MD"},
{full:"Massachusetts",abbr:"MA"},
{full:"Michigan",abbr:"MI"},
{full:"Minnesota",abbr:"MN"},
{full:"Mississippi",abbr:"MS"},
{full:"Missouri",abbr:"MO"},
{full:"Montana",abbr:"MT"},
{full:"Nebraska",abbr:"NE"},
{full:"Nevada",abbr:"NV"},
{full:"New Hampshire",abbr:"NH"},
{full:"New Jersey",abbr:"NJ"},
{full:"New Mexico",abbr:"NM"},
{full:"New York",abbr:"NY"},
{full:"North Carolina",abbr:"NC"},
{full:"North Dakota",abbr:"ND"},
{full:"Ohio",abbr:"OH"},
{full:"Oklahoma",abbr:"OK"},
{full:"Oregon",abbr:"OR"},
{full:"Pennsylvania",abbr:"PA"},
{full:"Rhode island",abbr:"RI"},
{full:"South Carolina",abbr:"SC"},
{full:"South Dakota",abbr:"SD"},
{full:"Tennessee",abbr:"TN"},
{full:"Texas",abbr:"TX"},
{full:"Utah",abbr:"UT"},
{full:"Vermont",abbr:"VT"},
{full:"Virginia",abbr:"VA"},
{full:"Washington",abbr:"WA"},
{full:"West Virginia",abbr:"WV"},
{full:"Wisconsin",abbr:"WI"},
{full:"Wyoming",abbr:"WY"}
];

$.fn.states = function(){
    this.autocomplete(state_autocomplete,{
        mustMatch:true,
        formatItem: function(row) {
            return row.full;
        },
        formatResult: function(row) {
            return row.abbr;
        }
    }).result(function(event, data){
        this.value = data.full;
        $(this).next(":input[type=hidden]").attr('value', data.abbr);
    });
}

var input_count = 0;

$(document).ready(function(){
	$.each($('input'), function(index, value){
		input_count++;
	});
	console.log("Number of inputs:  %i",  input_count);//use Firebug, not alert() !
});

Iterating Over Text Inputs

There is a problem with the above code, any input elements (including buttons) are going to be iterated over, so let’s use a more specific selector to only retrieve input elements of type “text”

...

$.each($('input[type="text"]'), function(index, value){

...

Required Elements

Okay, now we can iterate over our text inputs. So, where to go from here? Do we check that each item has a value? What if some items aren’t required? The easiest way I’ve found to do this is to use a class on required items (I usually call it “required” (creative, huh?)).

...
<form action="" method="POST" id="login_form">
	<dl>
	  <dt>
		<dd>Username <span class="req">*</span></dd>
		<dd><input type="text" name="username" class="required" maxlength="7" /></dd>
		<dd>Password <span class="req">*</span></dd>
		<dd><input type="text" name="password" class="required" maxlength="7" /></dd>
		<dd>Favorite Color<dd>
		<dd><input type="text" name="username" /></dd>
		<dd>Finish</dd>
		<dd><input type="submit" name="submit" /></dd>
	  </dt>
	</dl>
</form>
...

Now we can check which fields are required and cancel form submission if they are empty. Getting rid of our input counter variable, here is the new code

$(document).ready(function(){
	$('#login_form').submit(function(){//add an onsubmit event handler to our form
		var blank_fields = false;//initialize a generic error detector
		$.each($('input[type="text"]'), function(index, value){
			var t = $(this);//limit the number of new jQuery objects created
			if(t.hasClass('required')){//we know it is required
				if(t.val() == "" || t.val() === undefined){
					console.error('%s can not be blank', t.attr('name'));
					blank_fields = true;
				}
			}
		});
		return !blank_fields;//if there are no blank fields, submit
	});
});

That is a mouthful, but it is actually quite simple. When our form is submitted, we iterate over each input item to see if it is required. If it’s required, check to see if it is empty, if it is empty, return false (cancelling form submission).

Now, there are a couple errors with the code above. For one, it is checking all form inputs (not just the one in our form), so if we had multiple forms on the page, both with required elements, this would fail. Also, being able to check more specific criteria would be nice. We will limit our iteration to input items that are of type text and are descendants of the target form. Let’s also add a maxlength attribute to a form field to ensure that it is within the set character length:

$(document).ready(function(){
	$('#login_form').submit(function(){
		var blank_fields = false;
		var length_error = false;//check for length errors
		$.each($('#login_form input[type="text"]'), function(index, value){//limit input elements to those within the form
			var t = $(this);
			if(t.hasClass('required')){
				if(t.val() == "" || t.val() === undefined){//check if it's empty
					console.error('%s can not be blank', t.attr('name'));
					blank_fields = true;
				}
				if(t.attr('maxlength') !== undefined){//if maxlength attribute is present in the current element
					if(t.val().length > t.attr('maxlength')){//check string length against given maxlength
						console.error('%s is too long: %i chars', t.attr('name'), t.val().length);
						length_error = true;
					}
				}
			}
		});
		return !(blank_fields || length_error);//if there are no blank fields and no length errors, submit
	});
});

Okay, now we are getting somewhere. This could be used as is, but it doesn’t provide very friendly error messages (they have to have Firebug installed to know what the errors are). Let’s wrap up our code so far into a jQuery function and provide some more useful errors. I’ve commented changes to the code, but it is mostly the same.

$.fn.validate = function(options){
	/*
	* Define the default error message tag and styling, allow this to be overridden
	*/
	var defaults = {
		 formTag: 'div',
		 color: '#8A1F11',
		 border: '2px solid #FBC2C4',
		 errorBG: '#FBE3E4 0 0',
		 marginBottom:'1em',
		 padding:'0.8em',
		 width: $(this).width()
	 };
	var o = $.extend(defaults, options);

	/*
	* Private method creates error element
	*/
	function genError(msg){
		var err = $(document.createElement(o.formTag));//create an error element
		err.css('border', 		 o.border)
		   .css('background', 	 o.errorBG)
		   .css('margin-bottom', o.marginBottom)
		   .css('padding', 		 o.padding)
		   .css('color', 		 o.color)
		   .css('width', 		 o.width);//Apply css style rules to the error
		err.html(msg);//insert the error message into the element
		return err;
	}

	/*
	* Our slightly modified form validation
	*/
	$(this).submit(function(){//now uses $(this) reference as the method is applied to the form selector
		var blank_fields = false;//initialize a generic error detector
		var length_error = false;
		//now we use $(this).find('input[type="text"]') to locate our forms child elements
		$.each($(this).find('input[type="text"]'), function(index, value){
			var t = $(this);
			if(t.hasClass('required')){
				if(t.val() == "" || t.val() === undefined){
					//instead of logging error, create a new element and append it to the input elements parent
					errormsg = genError(t.attr('name') + ' can not be blank')
					t.parent().append(errormsg);
					blank_fields = true;
				}
				if(t.attr('maxlength') !== undefined){
					if(t.val().length > t.attr('maxlength')){
						//same as above but more concise
						t.parent().append(genError(t.attr('name') + ' is too long'));
						length_error = true;
					}
				}
			}
		});
		return !(blank_fields || length_error);
	});
}

Usage:

$(document).ready(function(){
	$('#login_form').validate({color:'#000'});
});