0

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

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

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

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

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

干杯

翅膀

4

4 回答 4

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

由于errorand是 & 元素的valid默认 CSS ，您也许可以像这样利用它们的颜色......classlabel

label.valid {
    color: #00f;
}

label.error {
    color: #f00;
}

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

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

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

引用操作：

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

那是因为实际的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);
        }
    });

});
于 2013-02-28T15:50:03.847 回答
1

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

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

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

我希望这会有所帮助。

于 2013-02-28T16:08:36.853 回答
0

也许与其将错误消息删除并插入到 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();
}
于 2013-02-28T13:45:18.580 回答
0

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

您可以按照此答案中的说明手动输入错误标签

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

脚本在下面小提琴在这里 

$(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');
        }
    });
});
于 2013-02-28T21:07:29.503 回答