As you’ve seen, missing HTML5 functionality can be reconstructed using jQuery techniques. This section explores some of the additions to form elements.
It’s just as important to know when not to use jQuery as when to use it. HTML5 brings to the table new form elements and functionality. Table 6-1 shows a selection of the new input types and controls.
In addition to new input controls, HTML5 also introduces a shortcut for adding placeholder text. Placeholder text is a temporary default text message displayed inside an input field until the user focuses on the field. Before, JavaScript was necessary to achieve this effect, but the newer HTML5 browsers support this by default with a placeholder attribute. For example, the following code sample shows two inputs with the placeholder attribute set. Figure 6-2 shows these inputs rendered on the page.
<!DOCTYPE html>
<html>
<body>
<form>
<input type=”text” placeholder=”name” >
<input type=”text” placeholder=”email” >
</form>
</body>
</html>
This placeholder attribute solves, at the browser level, a normally hand-coded usability enhancement. It’s a nice feature to have without having to write a line of code. Unfortunately, not every browser supports placeholder natively, so we’re not at the place where we can put away the code solutions. The following code sample will show how to implement a polyfill for placeholder using jQuery. Again, you’ll use Modernizr to detect if the browser supports this feature, and then use some jQuery goodness to fill in the gap for other browsers.
In a production environment, you’d like ly just use one of the excellent placeholder polyfill plugins, like the one written by Mathias Bynens: https://github.com/mathiasbynens/jquery-placeholder. It is still instructive to see how you might solve this problem without the use of plugins. Feature detection and polyfills are a strong piece of modern web development, so seeing how it works under the hood can enlighten in ways simply using a plugin can’t.
<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-1.7.1.js”></script>
<script src=”http://ajax.cdnjs.com/ajax/libs/modernizr/1.7/modernizr-1.7.min.js”>
</script>
<script type=”text/javascript”>
$(function(){
if( !Modernizr.input.placeholder ){
$( ’input[type=text]’ ).focus(function(){
if( $(this).val() === $( this ).attr( ’placeholder’ ) ){
$( this ).val(’’);
}
});
$( ’input[type=text]’ ).blur( function(){ if( $( this ).val() === ’’){
$( this ).val($( this ).attr( ’placeholder’ ));
}
});
}
});
</script>
</head>
<body>
<form>
<input type=”text” name=”userName” placeholder=”Enter your Name” />
<input type=”text” name=”address” placeholder=”Enter your Address” />
</form>
</body>
</html>
Code snippet is from placeholder.txt
The next example implements an e-mail input widget. Again, there is a native HTML5 version, but that isn’t implemented in all browsers.
<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-1.7.1.js”></script>
<script src=”http://ajax.cdnjs.com/ajax/libs/modernizr/1.7/modernizr-1.7.min.js”>
</script>
<script type=”text/javascript”>
$(function(){
var emailRegEx = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
$( “terrorDiv” ).hide();
If ( !Modernizr.inputtypes.email ){
$( “input[type=email]” ).blur( function(){
var emailValue = $( this ).val();
if( emailValue !== ’’ ){
var passes = emailRegEx.test( emailValue );
if( !passes ){
// display validation error message $( “terrorDiv” ).show();
// disable submit button
$( “input[type=’submit’]” ).attr( “disabled” );
} else {
$( “terrorDiv” ).hide();
$( “input[type=’submit’]” ).attr( “disabled”,”” );
}
}
});
}
});
</script>
</head>
<body>
<form>
<input type=”email” name=”companyEmail” />
<input type=”submit” />
<div id=”errorDiv”>Invalid email format.</div>
</form>
</body>
</html>
Code snippet is from email-input.txt
HTML5 controls degrade gracefully. That means that if a browser doesn’t support a particular control — for example, at the time of this writing only Opera supports the color control — a regular text input box is displayed.
In some cases you may want to validate against values in a database, and using Ajax you can achieve this effect. But first, the following section provides a quick review of Ajax and later on we return to form validation.
Source: Otero Cesar, Rob Larsen (2012), Professional jQuery, John Wiley & Sons, Inc