jQuery validate - 在文本字段中显示错误消息答案

【问题标题】：jQuery validate - display error message in text fieldjQuery validate - 在文本字段中显示错误消息
【发布时间】：2013-03-01 10:41:44
【问题描述】：

我正在为我的客户构建一个简单的表单，他们希望在文本字段中显示错误消息。使用 jQuery 的 Validation 插件可以实现这一点吗？

谢谢！

【问题讨论】：

哈哈.. 封闭式问题的封闭式答案.. ;)
在表单字段中使用占位符文本。对于验证错误，最好不要在字段中显示消息，而是突出显示字段并在字段旁边显示错误。

标签： jquery jquery-validate

【解决方案1】：

引用 OP：

“他们想在文本字段中显示错误消息。这样可以吗？可以使用 jQuery 的 Validation 插件来实现这一点吗？”

是的。可以使用插件的errorPlacement回调函数/选项。

不，我永远不会这样做。这使得用户几乎不可能与表单正确交互。该错误会清除用户已经输入的所有数据，并且用户必须删除消息文本才能输入数据。我相信你可以想出聪明的方法来克服这些问题，但是 IMO，从 UI 的角度来看，这是一个非常糟糕的设计。显示您的客户this demo，然后向下滚动并显示他们my second demo。

演示：http://jsfiddle.net/6fUTV/

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        // rules & options,
        errorPlacement: function(error, element) {
            element.val(error.text());
        }
    });

});

编辑：您可以改为使用placeholder 属性。该消息仍将在输入元素的内部，但不会被视为value，因此不会过多地干扰用户交互。但是，这种方法的一大缺点是，如果您有一个规则来验证数据格式，例如 email、minlength 等......用户将永远不会看到验证消息，因为占位符顶部的字段内有一个值！

errorPlacement: function(error, element) {
    element.attr("placeholder", error.text());
}

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

替代方案：

使用消息气泡显示错误：http://jsfiddle.net/kyK4G/

【讨论】：

感谢您的意见。您的评论对于说服我的客户不要在字段本身中显示错误消息非常有用。是的，我在 JavaScript 方面非常基础。我得坐下来好好学习:(
+1. 你的第一个小提琴有点有趣。无法删除错误消息以输入所需的信息。我认为我的答案在这种情况下效果更好，尽管您的第二把小提琴要好得多，但这不是 OP 提出的问题，幸运的是您的假设有效。对于我的答案的否决 - 我明确提到这是一个简单问题的简单解决方案。顺便说一句，这似乎是另一个被放弃的解决方案，直到永远都不会被接受。 @JungleJap：开始接受可以解决您问题的答案，否则，人们将停止回答您的问题。
@Fr0zenFyr，谢谢。我的第一个 jsFiddle 只是为了证明他的请求没有意义并说明原因。有一些笨拙的解决方法可以让它变得更好一些，但出于同样的原因，我选择将它们排除在外......我显然只是在说明将错误放在元素内部是一个非常糟糕的设计.

【解决方案2】：

他们告诉你这是一个不好的方法，也许是这样。

但是你可以使用占位符，而不是替换已经在里面的内容，只需要改变这个：

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

为此：

errorPlacement: function(error, element) {
    element.attr("placeholder",error.text());
}

希望对你有所帮助，保重！

【讨论】：

当唯一的规则是 required 时，这会很好用。但是，这种方法的一大缺点是，如果您有一个规则来验证数据格式，例如 email、minlength 等......用户将永远无法看到错误消息。

【解决方案3】：

是的，当然这是可能的，因为您验证了文本字段并且它被错误捕获只需将错误消息分配为该文本字段或占位符的值。

$("#yourtextfield").val("This field can't be empty.");

【讨论】：

用OP的插件怎么做？

【解决方案4】：

是的，你可以。你的技能看起来很原始。

让我们走简单的道路，因为您的问题听起来很简单。出错时，给出将消息字符串作为值分配给输入字段的条件。

类似

var err = "err_msg";

$('#elementId').val(err);

请参阅.val('value')http://api.jquery.com/val/ 部分

【讨论】：