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

I'm building a simple form for my client and They want to display the error message in the text field. Would this be possible to achieve this with jQuery's Validation plugin?

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

Thanks!

谢谢！

4 个解决方案

#1

They told you that is a bad method, maybe it is.

他们告诉你这是一个糟糕的方法，也许是。

But you can use placeholder, instead of replace the content already in, just change this:

但是你可以使用占位符，而不是替换已经存在的内容，只需更改：

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

For this:

为了这：

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

Hope that helped you, take care !

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

#2

Quote OP:

引用OP：

"They want to display the error message in the text field. Would this be possible to achieve this with jQuery's Validation plugin?"

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

Yes. It's possible Use the plugin's errorPlacement callback function/option.

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

NO, I would never do it. This makes it nearly impossible for the user to properly interact with the form. The error wipes out any data the user already entered and the user has to delete the text of the message to enter their data. I'm sure you can think of clever ways to overcome these issues, but IMO, it's a really poor design from a UI perspective. Show your client this demo, then scroll down and show them my second demo.

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

DEMO: http://jsfiddle.net/6fUTV/

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

$(document).ready(function () {

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

});

EDIT: Instead you could use the placeholder attribute. The message will still be inside of the input element, but it will not be seen as a value so it will not interfere with user interaction as much. However, the big downside to this approach is that if you have a rule to validate the data format such as email, minlength, etc... the user will never see the validation message because there is a value sitting inside the field on top of the placeholder!

编辑：相反，您可以使用占位符属性。消息仍然在输入元素内部，但它不会被视为一个值，因此它不会干扰用户交互。但是，这种方法的一个重大缺点是，如果你有一个规则来验证数据格式，如电子邮件，minlength等...用户将永远不会看到验证消息，因为有一个值位于字段顶部占位符！

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

DEMO 2: http://jsfiddle.net/n5saemj7/

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

Alternatives:

备择方案：

Show errors using message bubbles: http://jsfiddle.net/kyK4G/

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

More info: How to display messages from jQuery Validate plugin inside of Tooltipster tooltips?

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

#3

Yes ofcourse this is possible as you validate the text field and its caught in error simply assign the error msg as value of that text field or placeholder also.

是的，当你验证文本字段并且它被捕获时，这是可能的，只需将错误消息msg指定为该文本字段或占位符的值。

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

#4

Yes you can. Your skills seem very raw.

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

Let's take the simple path because your question sounds simple. On error, give a condition to assign the message string as a value to the input field.

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

something like

就像是

var err = "err_msg";

var err =“err_msg”;

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

$（ '＃elementId'）VAL（ERR）。

See the section .val('value') at http://api.jquery.com/val/

请参阅http://api.jquery.com/val/上的.val（'value'）部分。

#1