Question

我正在使用jquery验证来验证表单。我试图容纳一个设计师的心血来潮，它证明是相当棘手的。基本上，设计者希望每个强制输入都有蓝色文本“required *”。如果未完成强制性输入，则蓝色文本应变为红色文本，即只有颜色发生变化且文本保持不变。

我已将蓝色文字放在“强制”类

的标签中

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

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

这里是我觉得我做的事情有点愚蠢 - 错误的位置和成功我运行以下代码：

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＆amp;的默认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回调函数。

修改：

这是非常接近你想要的东西。你还需要调整一下......

DEMO：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

或许不是删除并将错误消息插入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 3

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

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

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

我希望有所帮助。

Answer 4

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

您可以按照this answer

中的说明手动输入错误标签

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

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

然后试试这个，我在数据属性中隐藏了错误消息，如果它存在则在成功回调中检索它。

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

jQuery验证 - 隐藏无效元素

4 个答案: