Tagged: jQuery

Creating a login form with jQuery

View Demo

Creating a login (or any form for that matter) can be trickier than it looks. After all how difficult can two text boxes a button and some labels be? There are different ways to accomplish this task, some using more proper semantically correct markup techniques than others. This example will attempt to give a real world case of how easy it can be to target elements contained inside the form with minimal scripting using the jQuery framework.

We’ll first start out with some html markup, notice the lack of css class attributes or JavaScript event handlers present.

<fieldset>
	<legend>Log In</legend>
	<p id="loginResult">Invalid login.. try again.</p>
	<form id="login" method="post">
		<dl>
			<dt><label for="username">Username:</label></dt>
			<dd><input id="username" type="text" /></dd>
			<dt><label for="password">Password:</label></dt>
			<dd><input id="password" type="text" /></dd>
		</dl>
		<p><input type="submit" value="Login" /></p>
	</form>
	<small>u:username / p:password</small>
</fieldset>

The next step we take is to target each element down the list and assign it a css class. We do this by using jQuery’s element specific selectors :text and :submit.

	$(function(){
		$('form#login :text').addClass('inputTextbox');
		$('form#login :submit').addClass('inputSubmitBtn');
	});

Next, we’ll add the event handler for the submit button by using .click(). To make things easier on ourselves we could always shorten our code by chaining the click event at the end of our submit button selector which was already defined in the previous step.

$('form#login :submit').addClass('inputSubmitBtn').click(function() {
     // click event code
}

Throw in an animation for good measure to display a message for invalid attempts and you’re good to go. Here is the full JavaScript code we’re working with.

		$(function(){
			$('form#login :text').addClass('inputTextbox');
			$('form#login :submit').addClass('inputSubmitBtn').click(function(){
				if($('#username').val() != "username" || $('#password').val() != "password")
				{
					for(i=0;i<5;i++)
						$("#loginResult").animate({opacity: 'toggle'}, 500 );	
						
					$("#loginResult").fadeIn(500);					
					return false;
				};
			});
	    });
More

Using jQuery Selectors

jQuery Selectors are a powerful feature of the framework that is essentially one of the main reasons that you’d want to use it in the first place. Those who are already familiar with how CSS3 selectors work will feel right at home with the concept of selectors. Today’s modern browsers at best support “most” of the CSS3 specification (with Firefox 3 & Safari), while others use only limited features of it. What’s so nice about jQuery is that the browser doesn’t need to support the CSS3 specification for you to use them within the framework itself. Those familiar with XPath will also be happy to know that simple XPath selectors are also supported via a plugin for jQuery if preferred. Here are some examples to demonstrate the power of selectors:

Style alternate table rows

$("table#mytable tbody tr:even").addClass("alt");

Add text based on a link’s file extention

$("a[href$=.pdf]").append(" (pdf download)");

Style links to external sites

$("a[href^=http://]").addClass("external");

Keep in mind that these are one line of code each that would otherwise take somewhere between 5 and 10 lines of javascript. As an added benefit, they also will execute as soon as the document object model is ready since the “$” shortcut function performs this for us behind the scenes. It is essentially waiting for the earliest time that the script is able to run, when all markup has been loaded (but not images or flash videos) so that we’re not having to wait for larger files to load before hand.

jQuery also has custom selectors which act like shortcuts for some common tasks. For example, you can find all buttons with $(:button), find all checkboxes with $(:checkbox), etc. If you would like to learn more, there is a jQuery selector documentation on their website as well.

More

jQuery Framework First Impressions

Javascript frameworks come in a variety of flavors, they’ll typically encapsulate common practices that web developers frequently use in their sites. With the three dominant mainstream browsers (FF3, IE7, Safari and potentially even more) to worry about, each with a slightly different technique to program for, it can be a good practice to use a tested framework which works across the board and remove the overhead associated with testing common methods.

The framework which I’ve come to grow quite fond of lately is called jQuery. JQuery is best described as a type of web designers toy box that focuses on separating content from functionality. So what do I mean by this?

Here is an example setup for a jQuery project.

Sample jQuery Page Structure
$(document).ready(function(){
   $("#Button1").click(function(event){
	alert("Say Something");
 });
});

Whats nice about jQuery is that the footprint is relatively small at 54k or less, and if you prefer there is a file hosted from the Google API website which you can link to directly inside of your page. In fact you’ll find that many tasks require a minimal amount of code to achieve some impressive results.

// Resize lightbox on button click

$(document).ready(function(){
   $("#Button1").click(function(){
      $("#lightbox").animate({
          width: "1000px", 
          height: "400px", 
          fontSize: "3em"
      });
   });
});

Those familiar with object oriented programming will be glad to know that jQuery also supports chainability as in this example.

$("a").addClass("test").show().html("foo");

The jQuery framework is becoming increasingly popular among many high profile sites such as Netflix, NBC and Dell to name a few. Even the Microsoft development community is taking notice as their next update of Visual Studio will be providing jQuery code completion within the software itself.

For more information on jQuery you can visit their website: http://jquery.com/

More