SO Question #4577895

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<form class="cmxform" id="commentForm" method="get" action="">
    <fieldset>
        <p>
            <label for="cname">Name</label>
            <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
        </p>
        <p>
            <label for="cemail">E-Mail</label>
            <em>*</em><input id="cemail" name="email" size="25"  class="required" />
        </p>
        <p>
            <label for="curl">URL</label>
            <em>  </em><input id="curl" name="url" size="25"  class="url" value="" />
        </p>
        <p>
            <label for="ccomment">Your comment</label>
            <em>*</em><textarea id="ccomment" name="comment" cols="22"  class="required"></textarea>
        </p>
        <p>
            <input class="submit" type="submit" value="Submit"/>
        </p>
    </fieldset>
</form>
<div id="cname-bg">Name is required</div>
<div id="ccomment-bg">Comment is required</div>
<div id="cemail-bg">Email is required</div>

CSS

* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }

#cname-bg,
#ccomment-bg,
#cemail-bg {
display:none;
}

JavaScript

$("#commentForm").validate({
    showErrors: function(errorMap, errorList) {
        var i, length = errorList.length;
        var el;
        var selector;
        
        $("div").hide();
        
        for (i = 0; i < length; i++) {
            el = errorList[i].element;
            // Do something custom with the element:
            $("#" + el.id + "-bg").show();
        }
    }
});