如何设置$ jQval.unobtrusive.options ErrorPlacement函数correclty

Question

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

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

1. 设置$ .validator.unobtrusive.options错误放置功能

2. 删除Unobtrusive验证

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

回答晚了 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。不显眼的代码的问题是当validationInfoset 时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");
};