Trouble with error placement jquery validate

I have several different fieldsets in a long form each one structured slightly differently. I have one that I can't get the error message to show up

HTML:

<form>
    <fieldset id="Initial>
         <div class="section">
             <h3>Do you wish to add <span>Market Depth,</span> the ability to view <span>Nasdaq Level II data</span> and <span>futures market depth?</span></h3>
                    <span class="row"><label><input type="checkbox" name="MKDPT" id="MKDPT">Add Market Depth</label></span>
          </div>
     </fieldset>
</form>

I want to inject the error element "p" after the span class row

js:

....
errorElement: "p",
errorPlacement: function(error, element) 
{
    if( element.closest("#final_step").length ) {
        error.appendTo( element.parent("li"));
    } else if( element.closest("#EX_AGREEMENT").length ) {
        element.closest('li').after(error);
    } else if( element.closest("#Initial").length ) {
        er开发者_如何学JAVAror.insertAfter( element.parent("div"));
    } else {
        error.insertAfter(element.parent("li"));
    }
},
....

should note the input #MKDPT is getting the error class

I think you're just one character off. Your errorPlacement function is being entered and entering the following if block:

/*Snip */
else if( element.closest("#Initial").length ) {
        error.insertAfter( element.parent("div"));
    } 

The problem is element.parent("div") yields an empty jQuery object, since parent() only looks at the immediate parent of the context element.

If you replace that line with element.parents("div") (note parents, not parent) you should be fine:

$("form").validate({
    errorElement: "p",
    errorPlacement: function(error, element) {
        if (element.closest("#final_step").length) {
            error.appendTo(element.parent("li"));
        } else if (element.closest("#EX_AGREEMENT").length) {
            element.closest('li').after(error);
        } else if (element.closest("#Initial").length) {
            error.insertAfter(element.parents("div"));
        } else {
            error.insertAfter(element.parent("li"));
        }
    }
});

Here it is working (assuming the checkbox is a required element): http://jsfiddle.net/uLRw9/