Jquery Validation: Get rid of label tag for error

Question

I'm having a hard time using jQuery Validation. In particular, I'm trying to remove the error message from the label tag and put it inside a div.

I have 5 blocks of radio buttons. Each block looks like this:

<div class="question-wrapper required">
    <div class="question-title required">
        <div class="question-box required">1.</div><h1>Question # 1</h1>
    </div>
    <div class="error-wrapper">
        <p><input type="radio" name="q1" class="q1 required" value="value1">Value 1</p>
        <p><input type="radio" name="q1" class="q1 required" value="value2">Value 2</p>
        <p><input type="radio" name="q1" class="q1 required" value="value3">Value 3</p>
        <p><input type="radio" name="q1" class="q1 required" value="value4">Value 4</p>
        <p><input type="radio" name="q1" class="q1 required" value="value5">Value 5</p>
    </div><!--error-wrapper-->
</div><!--question-wrapper-->

My jQuery code looks like this:

$(document).ready(function() {
    $("#music").validate({
        rules: {
            q1: {required: true},
            q2: {required: true},
            q3: {required: true},
            q4: {required: true},
            q5: {required: true},
        },
        messages: {
            q1: {required: "Select song 1"},
            q2: {required: "Select song 2"},
            q3: {required: "Select song 3"},
            q4: {required: "Select song 4"},
            q5: {required: "Select song 5"},    
        },
        errorElement: "div",
        errorLabelContainer: "#messageBox",
        wrapper: "span",
        errorClass: "invalid"   
    });
});

The problem is when run, the error code block looks like this:

<div htmlfor="q1" generated="true" class="invalid" style="">Select song 1</div>

Which is proving problematic for my attempts to position the error message. Any ideas why?