Jquery 如何正确设置$jQval.unobtrusive.options ErrorPlacement函数

在jquery.validate.unobtrusive中重写ErrorPlacement函数的正确方法是什么

查看jquery.validate.unobtrusive.js脚本，开发人员的意图似乎允许您通过设置$jQval.unobtrusive.options来应用自己的ErrorPlacement函数

在定义errorPlacement函数的validationInfo（form）函数中，我们看到了对ExecinoText的调用（“errorPlacement”，arguments）

似乎如果我们在$.validator.unobtrusive.options下创建一个errorPlacement函数，那么就会调用它

   $.validator.unobtrusive.options = {
        errorPlacement: function () {
            console.log("hello");
        }
    };

问题是，必须在jquery.validate.js之后和jquery.validate.unobtrusive.js被引用之前对其进行配置。否则，$jQval.unobtrusive.options为null，$form.data（数据验证、结果）将不会再次设置

    function validationInfo(form) {
    var $form = $(form),
        result = $form.data(data_validation),
        onResetProxy = $.proxy(onReset, form),
        defaultOptions = $jQval.unobtrusive.options || {},
        execInContext = function (name, args) {
            var func = defaultOptions[name];
            func && $.isFunction(func) && func.apply(form, args);
        }

    if (!result) {
        result = {
            options: {  // options structure passed to jQuery Validate's validate() method
                errorClass: defaultOptions.errorClass || "input-validation-error",
                errorElement: defaultOptions.errorElement || "span",
                errorPlacement: function () {
                    onError.apply(form, arguments);
                    execInContext("errorPlacement", arguments);
                },
                invalidHandler: function () {
                    onErrors.apply(form, arguments);
                    execInContext("invalidHandler", arguments);
                },
                messages: {},
                rules: {},
                success: function () {
                    onSuccess.apply(form, arguments);
                    execInContext("success", arguments);
                }
            },
            attachValidation: function () {
                $form
                    .off("reset." + data_validation, onResetProxy)
                    .on("reset." + data_validation, onResetProxy)
                    .validate(this.options);
            },
            validate: function () {  // a validation function that is called by unobtrusive Ajax
                $form.validate();
                return $form.valid();
            }
        };
        $form.data(data_validation, result);
    }

    return result;
}

处理这个问题的另一个方法是

设置$.validator.unobtrusive.options错误放置函数

删除不引人注目的验证

重新应用不引人注目的验证

$.validator.unobtrusive.options = {
    errorPlacement: function () {
        console.log("errorPlacement");
    }
};


$("#form_selector").removeData("unobtrusiveValidation");

// reapply the form's validator
$.validator.unobtrusive.parse(document);

或者，另一个选项是覆盖函数调用

var validator = $("#form_selector").data('validator');
var originalFunction = validator.settings.errorPlacement;
validator.settings.errorPlacement = function(error,element) {
    console.log("errorPlacement");
    originalFunction(error, element);
};

---

哪一种是实现您自己的错误定位方法的正确方法？

3年后才回答，但事实证明我今天就需要这个。不引人注目的代码可能已经在那个时间段内修复了，但是您的示例代码对我来说运行得很好。我在jquery.validate.js和jquery.validate.unobtrusive.js之后加载的一个站点脚本中添加了以下内容：

$.validator.unobtrusive.options = {
    errorPlacement: function () {
        console.log("hello");
    }
};

它工作得很好，但还有一个问题：必须在文档准备就绪之前运行这一行。

jquery.validate.unobtrusive.js

的底部通过此调用documentready上的

validationInfo

方法：

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

$.validator.unobtrusive.options = {};

parse

最终调用

validationInfo

。不引人注目的代码的问题是当

validationInfo

设置

defaultOptions=$jQval.unobtrusive.options |{}

时。显然，如果此时还没有定义unobtrusive.options，它将愚蠢地将

defaultOptions

设置为空白对象，并且不再检查它，不管您对$jQval.unobtrusive.options做了什么。如果他们只是删除了

|{}

，一切都会很好，因为它只是一个对象引用。唉

---

如果无法在加载文档之前设置errorPlacement回调，或者需要动态更改它，只需在

jquery.validate.js

和

jquery.validate.unobtrusive.js

之后加载的脚本中添加这一行即可：

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

$.validator.unobtrusive.options = {};

这将导致

defaultOptions

指向您可以引用的对象。然后，在任何需要的地方，按预期更改

$.validator.unobtrusive.options

。请注意不要覆盖该对象，因为如果覆盖，则不会影响由

defaultOptions

指向的对象。也就是说，这样做：

$.validator.unobtrusive.options.errorPlacement: function () {
    console.log("hello");
};

使用Object.assign 经过一些实验后，我能够让它与下面的代码一起工作（一切完成后加载）。我使用的是基于引导的主题，因此它希望表单组容器上有错误

Object.assign($.validator.unobtrusive,
    {
        options: {
            errorPlacement: function(error, element) {
                const container = $(element).closest(".form-group, .form-group-custom");
                if (container.length) {
                    container.addClass("has-error");
                }
            },
            success: function(error, element) {
                const container = $(element).closest(".form-group, .form-group-custom");
                if (container.length) {
                    container.removeClass("has-error");
                }
            }
        }
    });

---

我与这个问题斗争了好几天，我尝试了几乎所有可能的选择。它在少数情况下有效，但并不可靠。应该满足太多的条件

对我来说，有效的方法是将“jquery.validate.unobtrusive.min.js”与我的脚本捆绑在一起。每次都是这样，毫无例外。捆绑的顺序可能很重要，请将脚本放在第二位

script.js：

var settings = {
    errorPlacement: function errorPlacement(error, element) {
        console.log("hello");
    }
}
$.validator.unobtrusive.options = settings;

bundleconfig.json（用于.NET环境。根据需要修改它）

---

别以为你已经解决了这个问题（甚至记不起来了）？我现在记不起来了。在我文章的最后，我建议两个解决这个问题的方法。我想我可能已经重写了函数调用。对我来说，这似乎更干净。对我来说，解决方案是，您还可以在jQuery document.ready回调中设置不引人注目的选项，该回调在引入不引人注目的验证JS之前在代码中定义，我认为这是最优雅的解决方案。这保证您的document.ready回调将在unobtrusive validation的document.ready回调（在其中读取选项）之前运行，但它仍将在unobtrusive validation JS定义了

$.validator.unobtrusive.options

之后运行。