Question

<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，从而显示一个丑陋的文本字符串，或者找到一种在输入上方显示验证消息的方法。

编辑：

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

Answer 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>

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

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

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

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

1 个答案: