2

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

谢谢！

4

4 回答 4

8

引用操作：

“他们想在文本字段中显示错误消息。这可以通过 jQuery 的验证插件来实现吗？”

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

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

演示：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/

更多信息： 如何在 Tooltipster 工具提示中显示来自 jQuery Validate 插件的消息？

于 2013-03-01T17:40:56.740 回答
7

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

但是您可以使用placeholder，而不是替换已经存在的内容，只需更改以下内容：

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

为了这：

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

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

于 2014-03-26T18:33:56.720 回答
0

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

$("#yourtextfield").val("This field can't be empty.");
于 2013-03-01T10:50:13.473 回答
0

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

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

就像是

var err = "err_msg";

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

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

于 2013-03-01T10:56:29.080 回答