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

46qrfjad  于 2023-06-22  发布在  jQuery
关注(0)|答案(3)|浏览(146)

jquery.validate.unobtrusive中重写ErrorPlacement函数的正确方法是什么?
查看jquery.validate.unobtrusive.js脚本,开发人员的意图似乎是允许您通过设置$jQval.unobtrusive.options来应用自己的ErrorPlacement函数。
在定义errorPlacement函数的validationInfo(form)函数中,我们看到对execInContext("errorPlacement", arguments)的调用。
看起来如果我们在$.validator.unobtrusive.options下创建一个errorPlacement函数,那么this将被调用。

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

问题是必须在jquery.validate.js之后和引用jquery.validate.unobtrusive.js之前配置。否则,$jQval.unobtrusive.optionsnull$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.optionserrorPlacement功能
1.删除不显眼的验证
1.重新应用不显眼的验证

$.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方法的正确方法?

mlmc2os5

mlmc2os51#

3年后才回答,但事实证明我今天正是需要这个。在这个时间段内,不显眼的代码可能已经被修复了,但是你的示例代码对我来说工作得很好。我将此添加到我的一个站点脚本中,该脚本在jquery.validate.js和jquery.validate.unobtrusive.js之后加载:

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

它工作得很好,但有一个额外的捕获:这一行必须在文件准备好之前运行。validationInfo方法在document ready上通过以下方式调用,从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.jsjquery.validate.unobtrusive.js之后加载的脚本中添加以下一行:

$.validator.unobtrusive.options = {};

这将导致defaultOptions指向一个可以引用的对象。然后,在任何需要的地方,按预期修改$.validator.unobtrusive.options。只是要小心不要覆盖对象,因为如果你这样做,你不会影响defaultOptions指向的对象。也就是说,这样做:

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

92dk7w1h2#

使用Object.assign

经过一些实验,我能够让它与下面的代码(加载后的一切)工作。我使用的是基于 Bootstrap 的主题,所以它希望表单组容器上有错误

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

eqqqjvef3#

我在这个问题上挣扎了好几天,我几乎尝试了所有可能的选择。它在少数情况下有效,但并不可靠。要满足的条件太多了。
对我有效的是将“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
  }
]

相关问题