在不同元素上显示 jQuery 验证消息答案

【问题标题】：Display jQuery validation message on different element在不同元素上显示 jQuery 验证消息
【发布时间】：2014-10-31 12:45:33
【问题描述】：

<div class="editor-field">
    @Html.TextBox("manager-control", "", new { id = "manager-control", @class = "form-control", placeholder = "Type to search..." })
    @Html.HiddenFor(model => model.manager, new { id = "manager-dn" })
    @Html.ValidationMessageFor(model => model.manager)
</div>

manager-control 是一个自动完成，自动完成选择处理程序将一个值添加到代表经理值的隐藏字段。我可以启用隐藏字段的验证消息，这很好，但验证消息本身显示在表单之外。

我想在manager-control 元素上显示消息本身。最好的方法是什么？ manager-dn 字段在提交表单时必须有一个值，所以简单地说应该填写 manager-control 是行不通的。

我能想到的两种方法是使用 LabelFor 代替 HiddenFor，从而显示丑陋的文本字符串，或者找到一种在输入上方显示验证消息的方法。

编辑：

这在您不想向用户显示所选自动完成项的值但想验证是否已选择某些内容的情况下很有用。

【问题讨论】：

请提供建设性反馈意见，不要只是偷偷摸摸。

标签： jquery asp.net-mvc unobtrusive-validation

【解决方案1】：

据我所知，实际上无法更改验证消息显示在哪个元素旁边。

我的解决方案：

<div class="editor-field">
    @Html.TextBoxFor(model => model.manager, new { id = "manager-dn", @class="form-control", style="position:absolute;z-index:-1;" })
    @Html.TextBox("manager-control", "", new { id = "manager-control", @class = "form-control", placeholder = "Type to search..." })                        
    @Html.ValidationMessageFor(model => model.manager)
</div>

这会将 TextBoxFor 隐藏在 AutoComplete 文本框后面。它保留了form-control 类，因为没有它，有一些 CSS 属性被遗漏，验证消息不会显示在同一个地方。

话虽如此，更改z-index 也意味着它不再自动填充到其容器的大小。这可以通过使用 jQuery 或 JavaScript 以编程方式将宽度设置为隐藏在它后面的元素的宽度来解决，在这种情况下；

$('#manager-dn').width($('#manager-control').width());

【讨论】：