jQuery 验证 - 在文本字段中显示错误消息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15155769/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery validate - display error message in text field
提问by JungleJap
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 的验证插件可以实现这一点吗？
Thanks!
谢谢！
回答by Sparky
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 的验证插件可以实现这一点吗？”
Yes. It's possibleUse the plugin's errorPlacementcallback 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 placeholderattribute. The message will still be insideof the input element, but it will not be seen as a valueso 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!
编辑：相反，您可以使用该placeholder属性。该消息将仍然是内部输入元件的，但它不会被看作是一个value，所以它不会与用户的交互多干扰。 然而，大的缺点，以这种方式是，如果你有一个规则来验证数据格式，如email，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?
回答by DarkteK
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:
但是您可以使用placeholder，而不是替换已有的内容，只需更改以下内容：
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 !
希望对你有帮助，保重！
回答by Yashankit Vyas
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.");
回答by Fr0zenFyr
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/
请参见.val('value')在http://api.jquery.com/val/
