jquery - 在 MVC 4.0 站点中，Unobtrusive jQuery 在 jQuery 1.9 升级中失败

Question

当我们将 jQuery 版本从 1.7.1 升级到 jQuery 1.9 时，Microsoft 不显眼的验证无法在我们的 MVC 4.0 站点上运行。

尝试修复

这些是我尝试过的修复，以及我读过的一些相关帖子。但我在这里阅读的建议并没有解决问题。

• MVC unobtrusive validation with JQuery 1.9 not working
• Unobtrusive Ajax stopped working after update jQuery to 1.9.0
• https://aspnetwebstack.codeplex.com/SourceControl/changeset/e6ea9683f1dbb107f5379e1de787abd046bc721a
• https://connect.microsoft.com/VisualStudio/feedback/details/776965/please-support-jquery-v1-9-0-properly-in-jquery-validate-unobtrusive

背景

我们正在将 MVC 4.0 站点升级到最新版本的 jQuery。我们的部分目标是将网站上的其他 jQuery 库(例如 Bootstrap)升级到各自的最新版本。这些升级将需要更高版本的 jQuery，比我们当前使用的当前版本 (1.7.1) 更新。我们希望将其应用到 jQuery 1.11，现在我正在实现尝试 jQuery 1.9 并利用 JQMigrate 脚本的中间步骤。我已阅读 GitHub 上针对 jQMigrate 的建议修复，但我不清楚如何在不显眼的验证代码上实现此修复。 https://github.com/jquery/jquery-migrate/blob/master/warnings.md#jqmigrate-jqueryparsejson-requires-a-valid-json-string

示例代码

下面的示例代码显示了 jquery.validate.unobtrusive.js 4.0 版本中 onError 和 onSuccess 函数的更改。每种情况下都会注明 Microsoft 的原始实现。除此之外，评论显示了我们为修复原始实现所做的一些尝试，以及显示从何处获得建议的相应链接。

function onError(error, inputElement) {  // 'this' is the form element

    /*
    // Codeplex fix from http://bit.ly/1xasYAq
    var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
        replace = $.parseJSON(container.attr("data-valmsg-replace") || null) !== false;

    // StackOverflow fix from http://bit.ly/1tKjGqS
    var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
        replace = container.attr("data-valmsg-replace") && $.parseJSON(container.attr("data-valmsg-replace")) !== false;
    */
    // Original Microsoft implementation
    var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
         replaceAttrValue = container.attr("data-valmsg-replace"),
         replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) !== false : null;

    container.removeClass("field-validation-valid").addClass("field-validation-error");
    error.data("unobtrusiveContainer", container);

    if (replace) {
        container.empty();
        error.removeClass("input-validation-error").appendTo(container);
    }
    else {
        error.hide();
    }
}

function onSuccess(error) {  // 'this' is the form element
    /*
    // Codeplex fix from http://bit.ly/1xasYAq
    var container = error.data("unobtrusiveContainer"),
        replace = $.parseJSON(container.attr("data-valmsg-replace") || null);

    // StackOverflow fix from http://bit.ly/1tKjGqS
    var container = error.data("unobtrusiveContainer"),
        replace = container.attr("data-valmsg-replace") && $.parseJSON(container.attr("data-valmsg-replace"));
    */
    // Original Microsoft implementation.
    var container = error.data("unobtrusiveContainer"),
         replaceAttrValue = container.attr("data-valmsg-replace"),
         replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) : null;

    if (container) {
        container.addClass("field-validation-valid").removeClass("field-validation-error");
        error.removeData("unobtrusiveContainer");

        if (replace) {
            container.empty();
        }
    }
}

这些是 View 中的控件。

@Html.TextBoxFor(m => m.DealerAccountNumber)
@Html.ValidationMessageFor(m => m.DealerAccountNumber)

这些是我们模型中的数据注释。

[Required(ErrorMessage = "Dealer is required")]
[RegularExpression(@"[a-zA-Z0-9]*", ErrorMessage = "Not a valid dealer number")]
[Display(Name = "Account")]
[Remote("ValidateDealerAccountNumber", "Registration", ErrorMessage = "Dealer was not found")]
public string DealerAccountNumber { get; set; }

这是我们 Controller 中的远程验证器。

public virtual ActionResult ValidateDealerAccountNumber(Dealer dealer)
{
    var success = (dealer != null);
    return Json(success, JsonRequestBehavior.AllowGet);
}

输入无效的经销商编号后，JQMigrate 脚本会显示以下警告:

JQMIGRATE: jQuery.parseJSON requires a valid JSON string  jquery-migrate-1.2.1.js:41
console.trace() jquery-migrate-1.2.1.js:43
migrateWarn jquery-migrate-1.2.1.js:43
jQuery.parseJSON jquery-migrate-1.2.1.js:232
q jquery.js:8197
r jquery.js:8000
r jquery.js:8558

我的理解是，Microsoft 在 MVC 5.0 中纠正了这个问题，但我们目前缺乏将整个站点从 MVC 4.0 升级到 MVC 5.0 并执行完整回归测试的奢侈。当然，只要我们引用 JQMigrate，不引人注目的验证就可以工作，但我们不希望这种依赖关系。

目前，我在此项目中使用 jquery.validate.unobtrusive.js 文件版本 4.0 的本地副本，最初是从 http://ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.js 复制的。 .

在该文件中，我用 addBack() 替换了 andSelf()，以与最新版本的 jQuery 保持一致。我尝试了上面第一个代码块中提到的 onError 和 onSuccess 函数中注释掉的更改。但这些都不起作用。

感谢您的帮助。

Answer 1

我尝试了你的场景，但我似乎无法重现这个问题。奇怪的是，您指向的 CDN 上的文件已经修复了 parseJSON 1 2 。它没有修复 andSelf() 但您应该能够通过更新 Unobtrusive.Validation package 来修复该问题。 .

如果更新后继续看到错误，您可以扩展从 JQMigrate 获得的堆栈跟踪吗？它没有提到跟踪中的不引人注目的验证。例如，这是我在脚本中强制出错的地方:


JQMIGRATE:jQuery.parseJSON 需要有效的 JSON 字符串 jquery-migrate-1.2.1.js:41
console.trace() jquery-migrate-1.2.1.js:43
migrateWarn jquery-migrate-1.2.1.js:43
jQuery.parseJSON jquery-migrate-1.2.1.js:232
onError jquery.validate.unobtrusive.js:58
...