Проверка Jquery: избавьтесь от метки тега для ошибки - PullRequest
Новая
       18

Проверка Jquery: избавьтесь от метки тега для ошибки

2 голосов
/ 20 января 2010

Мне трудно использовать jQuery Validation. В частности, я пытаюсь удалить сообщение об ошибке из тега 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>

Что проблематично для моих попыток разместить сообщение об ошибке. Есть идеи почему?

1 Ответ

1 голос
/ 15 февраля 2012

РЕДАКТИРОВАТЬ: Я знаю, что я не отвечаю напрямую на вопросы, которые вы задали, но я думаю, что понимаю проблемы, которые вы пытаетесь преодолеть, и надеюсь, что это поможет Я не смог получить то, что вы описываете в своем вопросе, чтобы работать для меня, и поэтому выбрал вариант ниже. Получить подтверждение использования div или определенного класса только для переключателей оказалось сложнее, чем я думал.

Я использую JQuery Mobile и пользовательский интерфейс, вот решение, к которому я наконец пришел. 

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...