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 将被删除并替换为错误类。至少看起来是这样的。当我查看页面的来源时，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覆盖了标签中的现有类，但是附加到select中的现有类。

如果这是一个CSS特异性问题，我测试用label.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 noob。我会喜欢一些帮助，但请慢慢说。：）

谢谢，谢谢金

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

我确定;）

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

addClass用JQuery Validation高亮显示替换现有的类

1 个答案: