jQuery Validation - 在无效时隐藏元素

Question

我正在使用 jquery 验证来验证表单。我试图适应设计师的突发奇想，但事实证明这相当棘手。基本上，设计者希望每个强制输入的蓝色文本“必需*”。如果未完成强制输入，则蓝色文本应变为红色文本，即只有颜色发生变化，文本保持不变。

我已将蓝色文本放在“强制”类的标签中

<label class="mandatory">required*</label>

我还将所有需要 jquery 验证的消息设置为与上面标签中相同的“必需*”文本。计划是隐藏蓝色标签，如果不验证则显示错误标签。

这是我觉得我做的事情有点愚蠢的地方 - 在错误放置和成功中，我正在运行以下代码：

errorPlacement: function (error, element) {
  element.siblings(".mandatory").hide();
  error.insertBefore(element.prev());
},
success: function (element) {
  element.siblings("label.errorMessage").remove();
  element.siblings(".mandatory").show();
}

但是，当提交表单时，这一切正常 - 蓝色标签被成功隐藏，错误标签被放置在正确的位置。

如果用户将文本添加到错误输入之一，则上面的“成功功能”将正确执行，错误标签被隐藏，而蓝色标签可见。

如果用户从他刚刚添加文本的同一输入中删除文本，则输入将单独验证并显示错误标签，这就是问题所在......错误放置代码似乎没有再次执行，现在我可以看到蓝色和红色标签。

任何人都知道我可以做些什么来在再次验证输入时隐藏蓝色标签 - 顺便说一句，如果再次提交表单那么一切都很好？

干杯

翼

Answer 1

我不相信当字段通过验证时显示错误消息是可能的。插件内部是在字段通过验证时隐藏所有标签的代码。不过，我知道您可能只是在尝试模拟效果。

如果您想尝试一下，我将提供一些见解，最终可能会带您找到解决方案。

查看highlight 和unhighlight 回调。这些补充功能是为显示通过/失败图标等而设计的。

这里有他们的默认代码：

    highlight: function (element, errorClass, validClass) {
        if (element.type === "radio") {
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else {
            $(element).addClass(errorClass).removeClass(validClass);
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        if (element.type === "radio") {
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
        } else {
            $(element).removeClass(errorClass).addClass(validClass);
        }
    },

这是默认的errorPlacement回调：

    errorPlacement: function (error, element) {
        error.insertAfter(element);
    },

success 回调没有默认值，但根据文档，您可以在成功时使用它在标签中放置文本。

    success: function (label) {
        label.removeClass('error').addClass('valid').text('ok')
    },

由于error 和valid 是class 的默认CSS label & 元素，您或许可以像这样利用它们的颜色...

label.valid {
    color: #00f;
}

label.error {
    color: #f00;
}

这是一个可用于测试的 jsFiddle：http://jsfiddle.net/7TPvP/

这是所有回调函数和选项的文档：http://docs.jquery.com/Plugins/Validation/validate#toptions

---

关于您的代码的一些注释：

引用 OP：

“错误放置代码似乎没有再次执行，现在我有 蓝色和红色标签都可见。”

这是因为实际的label（由插件为错误创建的）已经放置了一次。无需再次放置。如果您想让某些东西不断地开启和关闭，请查看highlight 和unhighlight 回调函数。

---

编辑：

这里有一些非常接近你想要的东西。你仍然需要稍微调整一下......

演示：http://jsfiddle.net/2mwfG/

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        // other options and rules,
        highlight: function (element, errorClass, validClass) {
            if (element.type === "radio") {
                this.findByName(element.name).addClass(errorClass).removeClass(validClass);
            } else {
                $(element).addClass(errorClass).removeClass(validClass);
                $(element).prev('.mandatory').hide(); // <-- added this
            }
        },
        unhighlight: function (element, errorClass, validClass) {
            if (element.type === "radio") {
                this.findByName(element.name).removeClass(errorClass).addClass(validClass);
            } else {
                $(element).removeClass(errorClass).addClass(validClass);
                $(element).prev('.mandatory').show();  // <-- added this
            }
        },
        errorPlacement: function (error, element) {
            error.insertAfter(element);
        }
    });

});

Answer 2

我没有过多地使用 jQuery 验证，但我想我知道你在做什么，我有一个建议让它更容易，它也可以解决你遇到的问题......而不是隐藏并在错误或成功时显示 2 个不同的标签，为什么不只使用一个标签并根据验证结果打开和关闭“错误”类？这样的事情可能会奏效：

errorPlacement: function (error, element) {
  element.siblings(".mandatory").addClass('error');
},
success: function (element) {
  element.siblings(".mandatory").removeClass('error');
}

由于“强制”css 规则，您的标签默认为蓝色，您可以为“错误”类编写样式，使其在应用该类时变为红色。这样，您就不会在添加和删除标签时摸索，您只会拥有一个只是切换状态的标签。

希望对你有帮助。

Answer 3

也许不是将错误消息删除并插入到 DOM 中，您可以一直将它放在那里，然后像为强制消息所做的那样显示或隐藏它？

所以将它包含在你的 html 中但隐藏它。

<span class="errorMessage" style="display: none;">* required</span>

然后您可以使用当前代码显示或隐藏它：

errorPlacement: function (error, element) {
  element.siblings(".mandatory").hide();
  element.siblings(".errorMessage")show();
},
success: function (element) {
  element.siblings(".errorMessage").hide();
  element.siblings(".mandatory").show();
}

Answer 4

首先 - 你说 errorPlacement 回调似乎没有再次执行。它没有。它在插件的生命周期中每个字段只执行一次。也就是说，一旦它生成了 errorLabel 并将其放置在页面中，它的工作就完成了。

您可以按照this answer 中的说明手动输入错误标签

<label for="name" class="error" generated="true">your message here</label>

但是，当字段有效时，插件会删除标签的内部文本。

那么试试这个吧，我已经将错误消息隐藏在一个 data- 属性中，并在成功回调中检索它（如果存在）。

<input name="one" id="one" class="required" />
<label data-message="* this is required" for="one" class="error valid"></label>

脚本在fiddle is here下面

$(function () {

    $('label[data-message]').each(function () {
        $(this).html($(this).data("message"));
    });

    $("form").validate({
        success: function (label) {
            if (label.data("message")) {
                label.addClass("valid").text(label.data("message"));
            } else {
                label.text("");
            }
        },
        submitHandler: function () {
            alert('form is ok');
        }
    });
});