在页面上多次使用视图模型时出现客户端验证问题

Question

我有一个视图模型，其中包含 4 个属性：用户名、角色、应用程序和原因（必需）。然后我使用以下 html 助手在视图中显示这些：

<form id="roleForm">
    <fieldset>
        <p>
            @Html.LabelFor(model => model.RoleName)
            @Html.DisplayWithIdFor(model => model.RoleName)
            @Html.HiddenFor(model => model.RoleName)
        </p>
        <p>
            @Html.LabelFor(model => model.UsersName)
            @Html.DisplayFor(model => model.UsersName)
            @Html.HiddenFor(model => model.UsersName)
        </p>
        <p>
            @Html.LabelFor(model => model.Application)
            @Html.DisplayFor(model => model.Application)
            @Html.HiddenFor(model => model.Application)
        </p>
        <p>
            @Html.LabelFor(model => model.Reasons)
            @Html.TextAreaFor(model => model.Reasons, new { @cols = "80", @rows = "4", @class = "k-textbox" })
            <span style="color:red;">@Html.ValidationMessageFor(model => model.Reasons)</span>
        </p>
        <button class="button-yes k-button" type="button">OK</button>
        <button class="button-no k-button" type="button">Cancel</button>
        <!-- Allow form submission with keyboard without duplicating the dialog button -->
        <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
</form>

但是，由于一个页面上特定系统的性质，我需要在单个页面上使用此视图模型来完成 3 种不同的事情。为此，我有 3 个局部视图和 3 个 Kendo UI 窗口，这部分再次正常工作。

然后出现的问题是 JQuery 总是在页面上定义第一个文本区域，这是可以预期的，因为它们都具有相同的 ID，所以我希望更改其他 2 个文本区域的 ID，见下文：

@Html.TextAreaFor(model => model.Reasons, new { @id = "AddCompanyReasons", @cols = "80", @rows = "4", @class= "k-textbox" })

现在可以找到正确的文本区域。然而，现在的问题是验证总是在客户端返回 true，尽管从文本框中获取文本或缺少文本。

var isReasonValid = $('#AddCompanyReasons').valid();

我曾想过，每次属性出现在页面上时创建一个属性来稍微更改属性名称可能会解决这个问题，但似乎有点极端。

以前有没有人遇到过这个问题，有没有人对如何解决这个问题有任何想法？

编辑

Terleric Kendo Window Popups 显示三种形式：

@(Html.Kendo().Window()
    .Name("remove-role-window")
    .Title("Update Roles")
    .Visible(false)
    .Content(@<text>
        @Html.Partial("~/Areas/UserCurrentRoles/Views/UserCurrentRoles/_AXRemoveRole.cshtml")
    </text>)
    .Modal(true)
    .Width(500)
    .Events(e => e.Open("resetDialog"))
)

@(Html.Kendo().Window()
    .Name("remove-company-window")
    .Title("Update Roles")
    .Visible(false)
    .Content(@<text>
        @Html.Partial("~/Areas/UserCurrentRoles/Views/UserCurrentRoles/_RemoveAXCompany.cshtml")
    </text>)
    .Modal(true)
    .Width(500)
    .Events(e => e.Open("resetCompanyDialog"))
  )

@(Html.Kendo().Window()
    .Name("add-company-window")
    .Title("Update Roles")
    .Visible(false)
    .Content(@<text>
         @Html.Partial("~/Areas/UserCurrentRoles/Views/UserCurrentRoles/_AddAXCompany.cshtml", Model)
    </text>)
    .Modal(true)
    .Width(500)
    .Events(e => e.Open("resetAddDialog"))
)

Answer 1

验证适用于文档就绪。如果 html 动态变化，则在文档准备好之后。通过任何操作方式，任何被转载或重新创建的元素都不会被验证。您将不得不再次运行验证功能来验证所有字段。