使用Object.assign

Question

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

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

在定义errorPlacement函数的validationInfo（form）函数中，我们看到对execInContext的调用（＆＃34; errorPlacement＆＃34;，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方法的正确方法是什么？

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，那么无论你对$ jQval.unobtrusive.options做什么，它都会愚蠢地将defaultOptions设置为空白对象而不再检查它。如果他们刚删除了|| {}，那么一切都会很好用，因为它只是一个对象参考。唉...

如果在加载文档之前无法设置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
  }
]

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

3 个答案:

使用Object.assign