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

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

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

在定义errorPlacement函数的validationInfo(form)函数中，我们看到对execInContext(“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(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;
}

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

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

哪种方法是实现自己的errorPlacement方法的正确方法？

最佳答案

回答迟了3年，但事实证明我今天确实需要这个。不干扰代码可能已在该时间段内得到修复，但是您的示例代码对我来说工作得很好。我将此添加到我在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");
};