Stylish Form with help text + Validation

by blowsie

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>
<script src="https://github.com/brandonaaron/livequery/raw/master/jquery.livequery.js"></script>
<div id="form-contents">
    <h2>Form Contents</h2>
    <ul>
        <li title="This section is complete and is locked" class="complete"><a href="#1">1. Item Details</a></li>
        <li><a href="#2">2. Your Details</a></li>
    </ul>
</div>

<form id="test-form" >
    <div id="1" class="subform">
        <h2>1. Item Details</h2>
        <div class="group">
            <label><em>*</em> Asset Ref:</label>
            <input class="required" type="text" name="aref"/>
            <label class="help">Please enter the Asset Ref for this item</label>
        </div>
        <div class="group">
            <label><em>*</em> Location:</label>
            <input class="required" type="text" name="loc"/>
            <label class="help">The location of this asset</label>
        </div>
        <div class="group">
            <label>Model:</label>
            <input type="text"/>
            <label class="help">The model of this asset</label>
        </div>
        <div class="group">
            <label>Item Type:</label>
            <input type="text"/>
        </div>
        <div class="group">
            <label>Description:</label>
            <input type="text"/>
        </div>
    </div>
    <div id="2" class="subform">
        <h2>2. Your Details</h2>
        
        <div class="group">
            <label><em>*</em> Email:</label>
            <input type="text" class="required email" name="email"/>
            <label class="help">Please enter your email address</label>
        </div>
        <div class="group">
            <label>Model:</label>
            <input type="text"/>
        </div>
        <div class="group">
            <label>Item Type:</label>
            <input type="text"/>
        </div>
        <div class="group">
            <label>Description:</label>
     ...

CSS

body { font-family: Tahoma; font-size:12px;}
#form-contents  {  padding:20px;
    background:#eee;
    border:1px solid #ddd;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin:10px 10px 10px 0;
    width:200px; position: fixed; }
#form-contents li { background:#f9f9f9;
    padding:2px; 
    margin:3px 0;
  -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;}
#form-contents li.complete {background:#f9f9f9 url('http://abuilding.co.uk/icons/accept.png') 95% 50% no-repeat;}
#form-contents li a {text-decoration:none;}
#test-form {width:700px; float:left; margin-left:250px}
.subform {
    padding:20px; 
    background:#eee;
    border:1px solid #ddd;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin:10px 0;
    width:100%;
}
.subform.status{
    padding:20px;
    background:yellow;
    border:1px solid #ddd;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin:10px 0;
}
h2 {
    font-size:14px; 
    letter-spacing:-0.5px; 
    font-weight:bold; 
    margin-bottom:8px; 
    text-indent:0px;
}
div.group, fieldset.group {
    position:relative;
}

.group{
    margin: 10px 0;
    font-size:12px;
}
.group .radio {
    display:inline-block;
    zoom: 1;
    margin-left:2px;
}
.group .checkbox{
    display:inline-block;
    zoom: 1;
    margin-left:2px;
    margin-top:8px
}
.group select {margin-top:3px;}
.group label.help, .group label.error{
    font-size:10px; 
    padding: 4px 8px 4px 28px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    display:none;
    margin:0 0 0 5px;
    position:absolute;
    left:410px;
    top:1px;
    width:auto;
    height:14px;
    text-align:left;
}
.group label.help {
    background:#d1e4f3 url('http://abuilding.co.uk/css/images/notifications/info-mini.png') no-repeat 5px 50%;
    border:1px solid #4d8fcc;
}
.group label.error {
   ...

JavaScript

jQuery.expr[':'].focus = function(elem) {
    return elem === document.activeElement && (elem.type || elem.href);
};

$('.group').find('input').focus(function() {
    if ($(this).parent().find('label.error').is(':visible') == false) {
        $(this).parent().find('.help').show();
    }
});
$('.group').find('input').blur(function() {
    $(this).parent().find('.help').hide();
})
$('label.error:visible').livequery(function() {
    $(this).parent().find('.help').hide();
})
$('label.error:hidden').livequery(function() {
    if ($(this).parent().find('input').has(':focus')) {
        $(this).parent().find('.help').show();
    }
})
$('#test-form').validate();