addClass 用 JQuery Validation highlight 替换现有类

Question

我正在使用 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; } 

当我提交表单时（没有填写字段，因此会生成错误） categoryID 标签上的 ownline 类被删除并替换为 error 类。至少看起来是这样。当我查看页面的源代码时，categoryID 标签如下所示。 （为简洁起见，我删除了选择选项。）

<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 覆盖了标签中的现有类，但追加到了选择中的现有类。

如果这是一个 CSS 特异性问题，我确实测试了使用 label.ownline 作为选择器编写 ownline 样式，但它没有解决它。

这是一个安装了 Contact Form 7 的 WordPress 网站，但 I added a function to functions.php so Contact Form wouldn't call its stuff on the page in question。

我已经用谷歌搜索了好几个小时了。

我绝对是一个 JQuery 菜鸟。我很想得到一些帮助，但请慢慢说。 :)

谢谢谢谢， 金

Answer 1

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

我敢肯定 ;)

关键是，验证插件有自己的错误管理方法，默认情况下它使用它找到的最近的“标签”，这里我们告诉这个插件模块到别的地方去做它的东西。