使用远程验证,在表单外部单独显示ValidationMessageFor

本文关键字:表单 外部 单独 ValidationMessageFor 显示 程验证 验证 | 更新日期: 2023-09-27 18:18:26

我遇到了一个问题,希望你能帮我解决。

我有一个表单,其中有几个字段,其中一些是远程验证的。

@using (Html.BeginForm("Action", "Controller", new { id = "myForm" }))
{
    @Html.AntiForgeryToken()    
        <table>
            <tr>
                <td width="225">Work permit/Registration card:</td>
                <td>Start date: @Html.EditorFor(m => m.WorkPermitStart)</td>
                <td width="50"></td> 
                <td>End date: @Html.EditorFor(m => m.WorkPermitEnd)</td> 
                <td>@Html.ValidationMessageFor(m => m.WorkPermitEnd)</td>
            </tr>
</table>
<li><button type="submit" value="submit" class="form-yes">submit</button></li>
}
像这样的一段代码工作得很好,当WorkPermitEnd输入失去焦点时,远程验证完成,如果字段无效,则消息如预期的那样显示在下面的表单元格中。

我的问题是,我需要改变它,并把表单本身之外的验证消息,在完全不同的部分。这就是我努力寻找合适的解决方案的地方,因为当失去上下文时,

@Html.ValidationMessageFor(m => m.WorkPermitEnd)

不起作用,并且不显示输入的验证消息,这是在原始表单中。所以我的问题是,是否有某种方法可以将验证消息传递到页面上的不同部分?

编辑:添加页面布局

<section id="content">
    @RenderBody()
</section>
<aside id="messages">
    <aside id="validation">
        @RenderSection("ValidateMessage", required: false)
    </aside>
    <aside id="help">
        @RenderSection("Help", required: false)
    </aside>
</aside>

使用远程验证,在表单外部单独显示ValidationMessageFor

就在我的头上,我想我会隐藏Html.ValidationMessageFor,然后使用jQuery/JavaScript复制的内容到你需要的位置。诀窍是确保jQuery在每次验证发生时更新,这可能需要在每次更改文本框时同步。