Question

我很难使用jQuery验证。特别是，我正在尝试从label标签中删除错误消息并将其放在div中。

我有5个单选按钮块。每个块看起来像这样：

<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-->

我的jQuery代码如下所示：

$(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"   
    });
});

问题是运行时，错误代码块如下所示：

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

这证明我尝试定位错误消息有问题。有什么想法吗？

Answer 1

编辑：我知道我并没有直接回答你提出的问题，但我认为我理解你要克服的问题并希望这会有所帮助。我无法得到你在问题中描述的内容，为我工作，所以选择了下面的选项。验证使用div或特定类仅用于单选按钮，结果比我想象的要难。

我正在使用JQuery Mobile和UI，这是我最终得到的解决方案。

<!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>

该脚本向验证程序添加一个方法，以便仅在选择了特定的单选按钮选项时进行验证，如果没有，则添加自定义错误消息。添加规则和errorPlacement以验证将它绑定在一起并在页面上的描述性段落后显示错误消息。

它不会将HTML从标签更改为div，但它对我来说也一样。

以下是呈现的HTML输出。

<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 -->

只是要完成，这是一个屏幕截图 enter image description here

Jquery验证：摆脱标签标签的错误

1 个答案: