jquery - 如何正确设置 $jAva.unobtrusive.options ErrorPlacement 函数

Question

覆盖 ErrorPlacement 的正确方法是什么？函数位于 jquery.validate.unobtrusive ？

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

在 validationInfo(form)定义 errorPlacement 的函数函数中，我们看到对 execInContext("errorPlacement", arguments) 的调用.

看起来，如果我们创建一个 errorPlacement功能在$.validator.unobtrusive.options下，然后这将被调用。

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

问题是，必须在 jquery.validate.js 之后和引用 jquery.validate.unobtrusive.js 之前进行配置。否则$jQval.unobtrusive.options是 null和$form.data(data_validation, result)不会再次设置。

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;
}

解决这个问题的另一种方法是:

1. 设置 $.validator.unobtrusive.options errorPlacement功能

2. 删除不显眼的验证

3. 重新应用不显眼的验证

$.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);
};

这是实现您自己的errorPlacement的正确方法方法？

Answer 1

晚了三年才回答，但事实证明我今天正是需要这个。不引人注目的代码可能已在该时间范围内得到修复，但您的示例代码对我来说工作得很好。我将其添加到在 jquery.validate.js 和 jquery.validate.unobtrusive.js 之后加载的站点脚本之一:

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

它工作得很好，但有一个额外的问题:这一行必须在文档准备好之前运行。 validationInfo 方法在文档就绪时通过此调用，从 jquery.validate.unobtrusive.js 的底部:

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

parse 最终调用 validationInfo。不引人注目的代码的问题是当 validationInfo 设置 defaultOptions = $jQval.unobtrusive.options || 时{}。显然，如果您此时尚未定义 unobtrusive.options，它会愚蠢地将 defaultOptions 设置为空白对象，并且永远不会再次检查它，无论您对 $jQval.unobtrusive.options 执行什么操作。如果他们只是删除了|| {} 一切都会很好，因为它只是一个对象引用。唉...

<小时/>

如果您无法在加载文档之前设置 errorPlacement 回调，或者需要动态更改它，只需在 jquery.validate.js 之后加载的脚本之一中添加这一行即可> 和jquery.validate.unobtrusive.js:

$.validator.unobtrusive.options = {};

这将导致 defaultOptions 指向您可以引用的对象。然后，无论您需要什么地方，按照您的预期更改 $.validator.unobtrusive.options 。请注意不要覆盖该对象，因为如果覆盖，则不会影响 defaultOptions 指向的对象。即，执行以下操作:

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