在 jquery 对话框中呈现的部分视图中的客户端验证，没有 Unobtrusive

Question

我在 jquery 对话框中有登录部分视图。当我单击带有空文本框的“登录”按钮时，应该会显示错误，但它会以空值发送到服务器并收到此错误。 我想使用客户端验证，但对话框中的部分视图不会更改为 html 输入 .... 我也尝试使用 Unobtrusive ，但在 IE9 中出现各种错误。

现在，我已经使用了这些脚本：

 <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

在没有 Unobtrusive 的情况下我应该怎么做客户端验证？

Answer 1

如果您不想使用不显眼的插件，那么您将需要手动配置 jquery 验证插件。 有多种方法可以做到这一点，我建议您从以下链接开始： http://docs.jquery.com/Plugins/Validation

但请注意，如果不使用不显眼的验证插件，您将不会受益于 MVC 3 中有关客户端验证的所有现有基础架构，例如渐进式增强或基于数据注释的客户端和服务器端验证。

ASP MVC 3 附带的 jquery.validate.unobtrusive 脚本依赖于 jquery 版本 1.5.1，MVC 3 也附带它。它可能适用于更高版本（我已将它与版本 1.6.4 一起使用）但我不确定像 1.4.4 这样的较低版本。 jquery.validation 脚本也依赖于 jquery 版本。例如，jquery.validation 1.8 可以很好地与 jquery 1.5.1 配合使用，但如果您使用的是 jquery 1.6.4，则需要升级到 jquery.validation 1.10。

因此，在默认的 MVC 3 应用程序中，您可以使用以下脚本：

    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

通过将这些设置添加到配置文件（在创建新的 MVC 3 应用程序时默认设置）来确保在您的 MVC 应用程序上启用客户端验证

<configuration>
  ...
  <appSettings>
    ...
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
    ...
  </appSettings>

最后要考虑到，验证不显眼的脚本会在最初加载文档时实际解析文档。 如果您检查 jquery.validate.unobtrusive.js 文件，您将在文档末尾看到这些行：

$(function () {
    $jQval.unobtrusive.parse(document);
});

因此，在页面初始加载后加载到 DOM 中的任何内容都不会由不显眼的验证处理，而是需要您手动解析。 这可以通过定义如下函数来完成，包含在您的页面或通用 javascript 文件中：

function partialViewLoaded(request, status, partialViewId) {
    if (request.responseText != "") {
        //Hook validations on elements of the loaded view
        $.validator.unobtrusive.parse($(partialViewId));        
    }
}

该函数将在使用 ajax 加载局部视图后调用。 如果您使用的是 MVC Ajax 助手，您可以设置一个完整的回调，如下所示（假设您正在将视图加载到 id 为“loginForm”的元素中）：

@using(Ajax.BeginForm(new AjaxOptions{ 
                           UpdateTargetId = "loginForm", 
                           OnComplete = "partialViewLoaded(xhr, status, '#loginForm')" })){

如果您是使用 jquery 手动执行 ajax 调用，那么您还可以设置完整的回调，如下所示：

$.ajax({
     url: "yourURL",
     complete: function(xhr, status){
         partialViewLoaded(xhr, status, "#loginForm");
     }
});