addClass заменяет существующий класс на выделение проверки JQuery - PullRequest
Новая
       11

addClass заменяет существующий класс на выделение проверки JQuery

1 голос
/ 17 сентября 2011

Я использую плагин JQuery Validation, и моя цель - чтобы к меткам недопустимых полей был применен класс ошибок.Мне удалось это сделать, но моя проблема в том, что JQuery перезаписывает существующий класс метки, а не добавляет к нему класс ошибок.

Вот JQuery: 

<script src="<?php bloginfo('template_directory'); ?>/js/lib/jquery.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.validate.js" type="text/javascript"></script>
<script>
    $(document).ready(function(){
        $("#profile-basic").validate({
            debug:true,
            highlight: function(element, errorClass, validClass) {
                $(element).addClass(errorClass).removeClass(validClass);
                $(element.form).find("label[for=" + element.id + "]")
                .addClass(errorClass);
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass(errorClass).addClass(validClass);
                $(element.form).find("label[for=" + element.id + "]")
                .removeClass(errorClass);
            }
        });
    });
</script>

Выделение и невыделениеварианты пришли с веб-сайта JQuery.(http://docs.jquery.com/Plugins/Validation/validate)

Вот HTML - рассматриваемые элементы являются меткой и выбираются для categoryID: 

<form method="post" action="" class="bullhorn" id="profile-basic">
    <div id="accordion">  <!-- Accordion is currently disabled -->
        <h3>Name*</h3>
        <div>
            <div class="twocol">
                <label for="firstName">First Name:*</label>
                <input type="text" id="firstName" name="firstName" class="required" />

                <label for="middleName">Middle Name:</label>
                <input type="text" id="middleName" name="middleName" />

                <label for="lastName">Last Name:*</label>
                <input type="text" id="lastName" name="lastName" class="required" />
            </div>
            <div class="twocol">
                <label for="categoryID" class="ownline">Please select your primary category:*</label>
                <select name="categoryID" id="categoryID" class="required">
                    <option value="">Category 1</option>
                    <option value="">Category 2</option>
                    <option value="">Category 3</option>
                    <option value="">Category 4</option>
                    <option value="">Category 5</option>
                    <option value="">Category 6</option>
                    <option value="">Category 7</option>
                    <option value="">Category 8</option>
                    <option value="">and so on</option>
                </select>
            </div> 
        </div><!-- name -->
    </div>
    <div class="buttons"><input type="submit" value="Save and Go to Work History"/><input type="submit" value="Save"/></div>
</form>

Обратите внимание, что аккордеон в настоящее время отключен - закомментирован полностью.

И соответствующий CSS: 

label { float:left; text-align:right; width:30%; margin:0 14px 14px 0; line-height:20px; font-weight:bold; }
input, select, textarea { float:left; width:63%; margin-bottom:14px; background:#eee; line-height:1; }
    input[type=submit],  input[type=reset] { float:right; display:block; width:auto; margin:20px 0 0 14px; }
input:focus, textarea:focus { background:#fff; }
input, textarea { padding:2px 4px; }
select option { text-transform:capitalize; }
textarea { height:49px; }

.ownline { text-align:left; width:100%; line-height:20px; font-weight:bold; margin-bottom:3px; }
    .ownline+input,  .ownline+select,  .ownline+textarea, .ownline+.fieldinstructions+select { width:100%; }

label.error { color:#8e082d; }
    label.error:before { content: "\00bb\00a0"; display:inline-block; text-indent:-10px; }
input.error { border:2px solid #8e082d; background-color:#fdf5f3; }

Когда я отправляю форму (без заполненных полей, чтобы генерировать ошибки) Класс ownline на ярлыке categoryID удаляется и заменяетсяпо классу error . По крайней мере, так оно и есть. Когда я просматриваю источник страниц, метка categoryID выглядит так: ниже. (Я убрал опцию select для краткости.) 

<label for="categoryID" class="ownline">Please select your primary category:*</label>
<select name="categoryID" id="categoryID" class="required">
</select>

Но в Firebug это выглядит так: 

<label class="error" for="categoryID">Please select your primary category:*</label>
<select id="categoryID" class="required error" name="categoryID">
</select>

Интересно, что JQuery переписал существующий класс в метке, но добавлен к существующему классу в select.

В случаеэто была проблема специфичности CSS, я тестировал написание стилей ownline с label.ownline в качестве селектора, но он не решил ее.

Это сайт WordPress с установленной Контактной формой 7, но Я добавил функцию в functions.php, чтобы контактная форма не вызывала ее содержимое на рассматриваемой странице .

Я гуглял это часами.

Яопределенно нуб JQuery.Я хотел бы помочь, но, пожалуйста, говорите медленно.:)

Спасибо, Ким

1 Ответ

1 голос
/ 17 сентября 2011 
$(document).ready(function(){
    $("#profile-basic").validate({
        debug:true,
        errorElement: "nothing", // <-- this works !! (or "div", or something else)
        highlight: function(element, errorClass, validClass) {
            $(element).addClass(errorClass).removeClass(validClass);
            $(element.form).find("label[for=" + element.id + "]")
            .addClass(errorClass);
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).removeClass(errorClass).addClass(validClass);
            $(element.form).find("label[for=" + element.id + "]")
            .removeClass(errorClass);
        }
    });
});

и я уверен;)

Дело в том, что плагин validate имеет свой собственный метод управления ошибками, и по умолчанию он использует ближайшую найденную им «метку», здесь мы говорим этому модулю плагина искать в другом месте, чтобы делать свои вещи.

...