jQuery & jQueryUI Base

HTML

<link rel="stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
<form action="#">
    <fieldset id="name">
        <ul>
            <li>
                <label for="firstname">First name:</label>
                <input type="text" id="firstname" name="firstname" />
            </li>
            <li>
                <label for="lastname">Last name:</label>
                <input type="text" id="lastname" name="lastname" />
            </li>
        </ul>
    </fieldset>
    <fieldset>
        <input type="submit" />
    </fieldset>
</form>

CSS

#name { 
    border: 1px solid grey; 
    padding: 5px;
    margin: 2px;
}

JavaScript

$.validator.addMethod("name", function(value, element) {
    return $("#firstname").val() !== '' && $("#lastname").val() !== '';
}, "Name is required");

$("form").validate({
    groups: {
        name: "firstname lastname"
    },
    firstname: "name",
    lastname: "name",
    errorPlacement: function(error, $element) {
        var name = $element.attr("name");
        if (name === "firstname" || name === "lastname") {
            error.insertAfter("#name");
        } else {
            error.insertAfter($element);
        }
    }
});