如何设置$jQval.unobtrusive.options ErrorPlacement函数相关性

Question

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

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

在定义validationInfo(form)函数的errorPlacement函数中，我们看到了对execInContext("errorPlacement"，参数)的调用。

如果我们在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错误定位函数
2. 删除未突出的验证。
3. 重新应用不突出的验证。 $("#form_selector").removeData("unobtrusiveValidation")；={ errorPlacement: errorPlacement () { console.log("errorPlacement")；}；$.validator.unobtrusive.options //重新应用表单的验证器$.validator.unobtrusive.parse(文档)；

或者另一个选项是重写函数调用。

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。不显眼的代码的问题是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");
};

Answer 2

使用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");
                }
            }
        }
    });

Answer 3

我为这个问题挣扎了好几天，我尝试了几乎所有可能的选择。它在少数情况下起作用，但并非真的起作用。应该满足太多的条件。

对我起作用的是将"jquery.validate.unobtrusive.min.js“与我的脚本捆绑在一起。这种方法每次都起作用，无一例外。捆绑的顺序可能很重要，把脚本放在第二位。

script.js：

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

bundleconfig.json (用于.NET环境)。根据您的需要修改它)

[
  {
    "outputFileName": "wwwroot/js/jquery.validate.unobtrusive.custom.min.js",
    "inputFiles": [
      "wwwroot/lib/jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.min.js",
      "wwwroot/js/script.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  }
]