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

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

谢谢！

2013-03-01 JungleJap

哈哈..关闭结束的问题的答案..;） – Fr0zenFyr 2013-03-01 10:58:57

在您的表单域中使用占位符文本。对于验证错误，在字段中显示消息并不是个好主意，而是突出显示字段并在字段旁边显示错误。 – Fr0zenFyr 2013-03-06 08:46:31

是的，当您验证文本字段并且发现错误时，您可以简单地将错误信息指定为该文本字段或占位符的值。

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

来源

2013-03-01 10:50:13

如何用OP的插件做到这一点？ – Sparky 2013-03-01 17:42:26

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

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

像

var err = "err_msg";

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

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

来源

2013-03-01 10:56:29 Fr0zenFyr

报价OP：

“他们希望在文本字段中显示错误消息。这会有可能与jQuery的验证插件来实现这一目标？”

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

NO，我绝不会去做。这使得用户几乎不可能正确地与表单进行交互，错误消除了用户已经输入的任何数据，并且用户必须删除该消息的文本以输入他们的数据，我相信你可以想到聪明的方式为了克服这些问题，但IMO，从UI的角度来看这是一个非常糟糕的设计。向客户展示您的客户this demo，然后向下滚动并显示它们my second demo。

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()); }

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

备选方案：使用消息

显示错误气泡：http://jsfiddle.net/kyK4G/

更多信息：How to display messages from jQuery Validate plugin inside of Tooltipster tooltips?

来源

2013-03-01 17:40:56 Sparky

感谢您的输入。您的评论对于说服我的客户不要在该字段中显示错误消息非常有用。是的，我非常基本的JavaScript。我必须坐下来学习它：（ – JungleJap 2013-03-04 12:05:07

+ 1.你的第一个小提琴有点儿有趣，不可能删除错误信息输入所需的信息。我想我的答案在这种情况下效果更好，尽管你的第二个小提琴但这并不是OP提出的问题，幸运的是你的假设是有效的。对于我的回答的倒退 - 我明确提到这是简单问题的简单解决方案。顺便说一下，这似乎是另一个被遗弃的解决方案 @JungleJap：开始接受解决问题的答案，否则，人们将不再回答您的问题。 – Fr0zenFyr 2013-03-06 08:39:55

@ Fr0zenFyr，thank-you。我的第一个jsFiddle只是为了证明他的请求没有任何意义，以说明原因。有几个笨拙的解决方法可以让它变得更好一点，但是我选择将它们留给s Ame的原因......我清楚地指出，将错误放在元素中是一个非常糟糕的设计。 – Sparky 2013-03-06 14:57:20

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

但是你可以使用占位，已经代替更换内容，只是改变这一点：

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

对于这一点：

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

希望，帮助你，多保重！

来源

2014-03-26 18:33:56 DarkteK

欲了解更多清晰** [jsfiddle]（http://jsfiddle.net/prashantptapase/6fUTV/36/）** – 2014-07-23 10:17:21

这将工作很好，当唯一的规则是'required'。然而，这种方法的一个很大的缺点是，如果你有一个规则来验证数据格式，比如'email'，'minlength'等等，用户将永远不会看到错误信息。 – Sparky 2015-01-26 22:57:24

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

回答

相关问题