如何排查JavaScript控制台的‘undefined’无效JSON格式错误？

控制台随机抛出Uncaught SyntaxError: "undefined" is not valid JSON错误，错误源自jquery.validate.unobtrusive.js第41行，发生在表单提交到控制器之前。目前错误未影响功能，但需修复以规避后续视图更新风险。

相关代码 #

视图代码 #

@using (Html.BeginForm("PushToDiamond", "Support", FormMethod.Post, new { id = "TransactionView" }))
{
    <input type="submit" form="TransactionView" onclick='return SubmitValues();' class="btn btn-success btn-sm" value='PushToDiamond' />
}
@section scripts{
    @Scripts.Render("~/bundles/SupportScript")
}

JavaScript函数 #

function SubmitValues() {
    debugger;
    if ($('input[name="IsSelected"]:checked').length == 0) {
        alert("Please select check boxes to process.");
        return false;
    }
    var i = 0;
    $('input[name="IsSelected"][type="checkbox"]').each(function (e, g) {
        if ($(g).prop('checked')) {
            var c = document.createElement('input');
            $(c).attr({ 'type': 'hidden', 'name': 'PolicyTransactionPKList[' + i + ']', 'value': $(g).val() });
            $('#TransactionView').append(c);
            i++;
        }
    });
    return true;
};

控制器方法 #

public ActionResult PushToEmerald(SupportModel model)
{
     _logger.LogInformation("Support - Pushing");
     var env = GetEnv(model?.Country);
     var rq = new PushToEmeraldRq { 
          Environment = env, 
          PolicyTransactionPK = model.PolicyTransactionPK ?? 0, 
          PolicyTransactionPKList = model.PolicyTransactionPKList ?? new List<int>()
     };
     var rs = _policyTransactionService.PushToEmerald(rq);
     model.ProcessRecord = rs.ProcessRecord;
     model.PolicyTransactions = rs.PolicyTransactions;
     return View("Index", model);
}

控制台错误栈 #

Uncaught SyntaxError: "undefined" is not valid JSON
    at Function.parse [as parseJSON] (<anonymous>)
    at HTMLFormElement.onError (jquery.validate.unobtrusive.js:41:25)
    at $.validator.proxy (jquery-3.6.0.js:10780:13)
    at $.validator.showLabel (jquery.validate.js:983:35)
    at $.validator.defaultShowErrors (jquery.validate.js:928:11)
    at $.validator.showErrors (jquery.validate.js:553:10)
    at $.validator.form (jquery.validate.js:468:9)
    at HTMLFormElement.<anonymous> (jquery.validate.js:106:20)
    at HTMLFormElement.dispatch (jquery-3.6.0.js:5430:27)
    at elemData.handle (jquery-3.6.0.js:5234:28)
onError @   jquery.validate.unobtrusive.js:41
proxy   @   jquery-3.6.0.js:10780
showLabel   @   jquery.validate.js:983
defaultShowErrors   @   jquery.validate.js:928
showErrors  @   jquery.validate.js:553
form    @   jquery.validate.js:468
(anonymous) @   jquery.validate.js:106
dispatch    @   jquery-3.6.0.js:5430
elemData.handle @   jquery-3.6.0.js:5234

调试结果 #

表单序列化输出 #

$("form").serialize()
'Country=Usa&IsAllTransactionsSelected=false&IsSelected=37644306&IsSelected=37647734&Country=Usa'

验证器状态 #

$("form").validate()
$.validator {settings: {…}, currentForm: form, labelContainer: jQuery.fn.init(0), errorContext: jQuery.fn.init(1), containers: jQuery.fn.init(0), …}
containers: jQuery.fn.init [prevObject: jQuery.fn.init(0)]
currentElements: jQuery.fn.init []
currentForm: form
errorContext: jQuery.fn.init [form]
errorList: []
errorMap: {}
groups: {}
invalid: {}
labelContainer: 
jQuery.fn.init []
pending: {}
pendingRequest: 0
settings: {messages: {…}, groups: {…}, rules: {…}, errorClass: 'input-validation-error', pendingClass: 'pending', …}
submitted: {}
successList: []
toHide: jQuery.fn.init []
toShow: jQuery.fn.init []
valueCache: {}
[[Prototype]]: Object

排查与解决方案 #

核心原因 #

错误发生在jquery.validate.unobtrusive.js的onError函数中，该函数尝试将验证消息解析为JSON，但存在某个验证消息的原始值为undefined，导致JSON解析失败。

具体排查步骤 #

1. 检查模型验证特性：查看SupportModel中所有带有验证特性（如[Required]、[StringLength]等）的属性，确认是否存在ErrorMessage未赋值或赋值为null的情况。Razor引擎在生成HTML时，会将未设置的错误消息输出为undefined，触发解析错误。
2. 检查页面HTML元素：查看页面中所有带有data-val属性的表单元素，检查其data-val-*系列属性（如data-val-required）的值是否为undefined。
3. 检查重复字段：从序列化结果可见存在两个Country=Usa字段，需确认字段重复原因，避免模型绑定异常。

修复方案 #

方案1：修正模型验证配置

确保所有验证特性的ErrorMessage都有有效赋值，例如：

[Required(ErrorMessage = "Country is required")]
public string Country { get; set; }

方案2：重写unobtrusive错误处理逻辑

临时添加全局错误处理，捕获JSON解析失败的情况：

$(document).ready(function() {
    // 重写unobtrusive的错误处理函数
    var originalOnError = $.validator.unobtrusive.options.error;
    $.validator.unobtrusive.options.error = function(error, inputElement) {
        try {
            // 尝试解析JSON，失败则直接使用原始消息
            var parsedMessage = JSON.parse(error.message);
            error.message = typeof parsedMessage === 'object' ? parsedMessage : error.message;
            originalOnError(error, inputElement);
        } catch (e) {
            // 解析失败时，直接显示原始错误消息
            var $input = $(inputElement);
            var $errorContainer = $input.closest('.form-group').find('.text-danger');
            if ($errorContainer.length) {
                $errorContainer.text(error.message || 'Validation error');
            } else {
                $input.after('<span class="text-danger">' + (error.message || 'Validation error') + '</span>');
            }
        }
    };
});

方案3：清理重复字段

检查页面中Country字段的生成逻辑，避免重复渲染，确保每个字段唯一。

内容的提问来源于stack exchange，提问作者Patrick Shea