jQuery Form Highlighting

Carrying on the theme from yesterday with the jQuery & PHP username availability checker, i’ve got a quick tip to improve the user experience, so the user knows exactly where they are in the filling out complex forms. We could use CSS to do this alone, however it doesn’t work in Internet Explorer. So in order to cater for all browsers we can achieve the same effect with JavaScript.

The HTML

So in the code below we simply have a form input field wrapped in a div with the class ‘input’. The basic logic of how the code works is that when a user clicks inside the input field it triggers an event listener which triggers a function, which adds or removes a class to the parent element in relation to the form input field. Sounds quite complex when you read it but its simple. Lets break it down.

1. Below we have 3 form input fields
2. Notice that each form element is wrapped in a div with the same class

  <div class='input'> Name:<br/>
    <input name='Name' type='text'/>
  </div>
  <div class='input'> Email:<br/>
    <input name='Email' type='text'/>
  </div>
  <div class='input'> Town:<br/>
    <input name='Email' type='text'/>
  </div>

The JavaScript

1. We start with our first function which is in our DOM ready function. This function is run when a user clicks, or tabs into the input field. You can see that all we do is add the class ‘highlight’ to the div class ‘input’

   	$('input').focus(function() {
   			$(this)
   				.parent().addClass('highlight')
   		});
   

2. We do the same with this function but instead of it adding the class highlight we simply remove it.

   	$('input').blur(function() {
   			$(this)
   				.parent().removeClass('highlight')
   		});
   

The Complete JavaScript

$(document).ready(function(){
		$('input').focus(function() {
			$(this)
				.parent().addClass('highlight')
		});

		$('input').blur(function(){
			$(this)
				.parent().removeClass('highlight')
		});

	});

A Sprinkle Of Style

.input {
	padding:6px;
	width:315px;
	border: 1px solid #fff;
}
input {
	border:4px solid #666;
	padding:4px;
	width:300px;
}
.highlight {
	background-color:#FF6;
	border: 1px solid #FC6;
}