Jquery Validation: Get rid of label tag for error_问答_开发者

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 c开发者_JAVA技巧lass="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?

EDIT: I know I am not directly answering the question(s) you have asked, but I think I understand the issues you are trying to overcome and hope this helps. I was unable to get what you are describing in your question to work for me and so chose the option below. Getting validate to use divs or a specific class just for radio buttons turned out to be harder than I thought it would be.

I am using JQuery Mobile and UI, here is the solution I finally arrived at.

<!DOCTYPE html>
<html>
    <head>
        <title>Application</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;">
        <meta charset="utf-8">


        <link href="css/redmond/jquery-ui-1.8.17.custom.css" rel="stylesheet" type="text/css">
        <link rel="stylesheet" type="text/css" href="jquery/jquery.mobile-1.0.1.min.css">
        <link type="text/css" href="jquery/mobiscroll-1.5.3.css" rel="stylesheet">

        <script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="jquery/jquery-ui-1.8.17.custom.min.js"></script>
        <script type="text/javascript">
            $(document).bind("mobileinit", function() {
                $.mobile.page.prototype.options.addBackBtn = true;
            });
            $(document).bind("mobileinit", function() {
                $.mobile.defaultPageTransition = 'none';
            });
            $(document).bind("mobileinit", function(){
              $.mobile.touchOverflowEnabled = true;
            });
        </script>
        <script type="text/javascript" src="jquery/jquery.validate.min.js"></script>
        <script type="text/javascript" src="jquery/jquery.mobile-1.0.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $.mobile.fixedToolbars.setTouchToggleEnabled(false);

                    jQuery.validator.addMethod('ru18', function(value, element, params) {
                                return $("input[name='ru18']:checked").val() == 'yes';
                     }, "Please visit a branch to open an account if you are not over the age of 18 and/or not a U.S. Citizen.");

                    jQuery.validator.addMethod('existing', function(value, element, params) {
                                return $("input[name='existing']:checked").val() == 'no';
                     }, "This account application does not currently support existing customers.");

                    $("#myForm").validate({
                        rules: {
                            ru18:{required:true,ru18:true},
                            existing:{required:true,existing:true}
                        },
                        errorPlacement: function(error, element) {
                         if (element.attr('name') === 'ru18') {
                                error.insertAfter('#pru18');
                         } else if (element.attr('name') === 'existing') {
                                error.insertAfter('#pexisting');
                         }
                         else {
                                error.insertAfter(element);
                         }
                    },
                    debug:true
                });

            });

        </script>
        <style type="text/css">
            label.error {color:red}
        </style>
    </head>
    <body>
<div data-role="page" id="aPage">
    <div data-role="header" data-position="fixed">
        <h1>Before We Begin</h1>
    </div><!-- /header -->
    <div data-role="content">
        <form class="cmxform" id="myForm" method="get" action="">
            <p id="pru18">Are you at least 18 years of age?</p>
            <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
                <input type="radio" name="ru18" id="ru18y" value="yes" checked="checked" class="required"> <label for="ru18y">Yes</label>
                <input type="radio" name="ru18" id="ru18n" value="no"> <label for="ru18n">No</label>
            </fieldset>

            <p id="pexisting">Are you an existing Customer?</p>
            <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
                <input type="radio" name="existing" id="existingy" value="yes"> <label for="existingy">Yes</label>
                <input type="radio" name="existing" id="existingn" value="no" checked="checked" class="required"> <label for="existingn">No</label>
            </fieldset>
            <p><button type="submit" data-role="button" data-icon="arrow-r" data-iconpos="right" data-theme="b">Begin New Application</button></p>
        </form>
    </div><!-- /content -->
</div><!-- /aPage -->

    </body>
</html>

The script adds a method to the validator to validate only when a specific radio button choice is selected and adds a custom error message if not. Rules and errorPlacement are added to validate that tie it together and display the error message after the descriptive paragraph on the page.

It does not change the HTML from a label to a div, but it works just as well for me.

Here is the HTML output as rendered.

<div style="min-height: 320px;" class="ui-page ui-body-c ui-page-active" tabindex="0" data-url="aPage" data-role="page" id="aPage">
    <div style="top: 0px;" role="banner" class="ui-header ui-bar-a ui-header-fixed fade ui-fixed-overlay" data-role="header" data-position="fixed">
        <h1 aria-level="1" role="heading" tabindex="0" class="ui-title">Before We Begin</h1>
    </div><!-- /header -->
    <div role="main" class="ui-content" data-role="content">
        <form novalidate="novalidate" class="cmxform" id="myForm" method="get" action="">
            <p id="pru18">Are you at least 18 years of age?</p><label class="error" generated="true" for="ru18">Please visit a branch to open an account if you are not over the age of 18 and/or not a U.S. Citizen.</label>
            <fieldset class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal" data-role="controlgroup" data-type="horizontal">
                <div class="ui-radio"><input name="ru18" id="ru18y" value="yes" checked="checked" class="required error" type="radio"><label class="ui-btn ui-btn-up-c ui-corner-left ui-radio-off" data-theme="c" for="ru18y"><span class="ui-btn-inner ui-corner-left"><span class="ui-btn-text">Yes</span></span></label></div> 
                <div class="ui-radio"><input class="error" name="ru18" id="ru18n" value="no" type="radio"><label class="ui-btn ui-corner-right ui-controlgroup-last ui-btn-up-c ui-radio-on ui-btn-active" data-theme="c" for="ru18n"><span class="ui-btn-inner ui-corner-right ui-controlgroup-last"><span class="ui-btn-text">No</span></span></label></div> 
            </fieldset>

            <p id="pexisting">Are you an existing Customer?</p><label class="error" generated="true" for="existing">This account application does not currently support existing customers.</label>
            <fieldset class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal" data-role="controlgroup" data-type="horizontal">
                <div class="ui-radio"><input class="error" name="existing" id="existingy" value="yes" type="radio"><label class="ui-btn ui-corner-left ui-radio-on ui-btn-active ui-btn-up-c" data-theme="c" for="existingy"><span class="ui-btn-inner ui-corner-left"><span class="ui-btn-text">Yes</span></span></label></div> 
                <div class="ui-radio"><input name="existing" id="existingn" value="no" checked="checked" class="required error" type="radio"><label class="ui-btn ui-btn-up-c ui-corner-right ui-controlgroup-last ui-radio-off" data-theme="c" for="existingn"><span class="ui-btn-inner ui-corner-right ui-controlgroup-last"><span class="ui-btn-text">No</span></span></label></div> 
            </fieldset>
            <p><div aria-disabled="false" class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-up-b" data-theme="b"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Begin New Application</span><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></span><button aria-disabled="false" class="ui-btn-hidden" type="submit" data-role="button" data-icon="arrow-r" data-iconpos="right" data-theme="b">Begin New Application</button></div></p>
        </form>
    </div><!-- /content -->
</div><!-- /aPage -->

And just to be complete, here is a screen-shot

Jquery Validation: Get rid of label tag for error