试图在 IE 中模仿 JavaScript 动态属性

Question

我有一些 JavaScript 可以与 jQuery.validate 一起使用。这需要一个从服务器返回的 JSON 对象，并将其传递给 showErrors 函数。 response.errors 对象看起来像这样...

{[
  { item1: "Email", item2: "Invalid format" },
  { item1: "ExpiryDate", item2: "Must be in the future" }
]{

下面的 ES6 代码工作正常...

for(var i = 0; i < response.errors.length; i++) {
  $('form').validate()
    .showErrors({ [response.errors[i].item1]: response.errors[i].item2 });
}

但是，我刚刚发现 IE 不支持 ES6，所以这在那里不起作用。我尝试使用 es6-shim（和 es-5shim），但没有用。

我一直在尝试编写一些与 ES5 兼容的代码来做同样的事情，但每次尝试都失败了。我查看了诸如 this one and 之类的答案，但我什么也做不了。

我最近的尝试如下...

var error = {};
error[response.errors[i].item1] = response.errors[i].item2;
$('form').validate().showErrors(error);

然而，尽管将 error 和之前的代码转储到控制台显示它们是相同的，但当我尝试使用此代码时，我在控制台中收到错误...

Uncaught (in promise) TypeError: Cannot read property 'type' of undefined at $.validator.highlight (jquery.validate.js:344) at $.validator.defaultShowErrors (jquery.validate.js:912) at $.validator.showErrors (jquery.validate.js:546) at handleServerResponse (Donate:305)

有问题的行是我调用 showErrors

的行

有人能帮帮我吗？

Update 只是为了澄清，我在循环中这样做的原因是服务器端代码 returns 三种类型的错误，正常的相关到特定的输入元素，与整个数据相关的一般元素，以及特定于表单支付部分的元素。我只将第一种类型传递给 jQuery.validate，因为第二种类型显示在表单的独立部分，而第三种类型必须以不同方式处理，因为支付处理器在iframe，意味着我必须手动添加错误。

第二次更新 原来是页面单独部分的一些代码导致了我的 JavaScript。我的代码和两个答案中显示的代码都很好，这是一个单独的问题。

Answer 1

要构建对象，您可以循环遍历从 AJAX 请求收到的数组，然后使用括号表示法向对象添加属性，然后将其传递给 showErrors() ，像这样：

var errors = {};
response.errors.forEach(function(err) {
  errors[err.item1] = err.item2
});
$('form').validate().showErrors(errors);

Answer 2

类似于 , but I would use reduce 获取 response.errors 数组并将其转换为具有正确位置属性的数组。

请注意，showErrors method takes an object 和 key/value 对是要显示的输入名称和消息，因此您无需在循环中调用它。

var errors = [
  { item1: "Email", item2: "Invalid format" },
  { item1: "ExpiryDate", item2: "Must be in the future" }
];

var errorsToShow = /*response.*/errors.reduce((arr, cur) => { 
  arr[cur.item1] = cur.item2; 
  return arr; 
}, {});

console.log(errorsToShow);

// $('form').validate().showErrors(errorsToShow);

您看到的错误很可能发生 here, in jquery.validate.js (this link goes to the source that makes up that file):

    highlight: function( element, errorClass, validClass ) {
        if ( element.type === "radio" ) {
            this.findByName( element.name ).addClass( errorClass ).removeClass( validClass );
        } else {
            $( element ).addClass( errorClass ).removeClass( validClass );
        }
    },

正在 HTMLInputElement 上寻找 type 属性，但 element 未定义。

您至少可以通过两种方式解决此问题：

通过确保您在对象中传递的错误仅适用于 item1（对象属性的键）引用命名元素（或未标记的元素）的错误以某种方式，以便您可以过滤掉它们）。这将是首选和最干净的方式。
通过提供您自己的 highlight 函数（如果由于某种原因您无法更改 API）。显然 jQuery 验证允许传递覆盖它们的某些函数，因此您可以调用 validate() with options 并在这些选项中传递您自己的 highlight 函数。也许以以下开头：
```
if (!element) return;
```
我建议还实现 unhighlight 函数，因为它有类似的代码。这不是首选选项，因为您只是在 "real" 问题上包扎绷带，即您要求 showErrors 显示不存在的错误（对 jQuery 验证插件）。您也可以只重载 showErrors，但这会涉及更多。

试图在 IE 中模仿 JavaScript 动态属性

Stuck trying to mimic JavaScript dynamic properties in IE

javascript

jquery

jquery-validate

ecmascript-5