试图在 IE 中模仿 JavaScript 动态属性时卡住了

Question

我有一些适用于 jQuery.validate 的 JavaScript。这需要从服务器返回的 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 和this one 之类的答案，但我什么都做不了。

我最近的尝试如下...

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 在 $.validator.highlight (jquery.validate.js:344) 在 $.validator.defaultShowErrors (jquery.validate.js:912) 在 $.validator.showErrors (jquery.validate.js:546) 在handleServerResponse（捐赠：305）

有问题的线路是我打电话给showErrors的线路

谁能帮帮我？

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

第二次更新原来是页面的一个单独部分上的一些代码抛出了我的 JavaScript。我拥有的代码，以及两个答案中显示的代码都很好，这是一个单独的问题。

Answer 1

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

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

Answer 2

类似于Rory's answer，但我会使用reduce 来获取response.errors 数组并将其转换为具有正确位置的属性的数组。

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

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 未定义。

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

1. 通过确保您在对象中传递的错误仅适用于item1（对象属性的键）指的是命名元素（或具有未以某种方式标记的那些元素，以便您可以过滤他们出去）。这将是首选和最干净的方式。

2. 通过提供您自己的 highlight 函数（如果您由于某种原因无法更改 API）。显然 jQuery Validation 允许将覆盖传递给它们的某些函数，因此您可以调用 validate() with options 并在这些选项中传递您自己的 highlight 函数。也许是这样开始的：

   if (!element) return;
   

   我建议也实现unhighlight 函数，因为它有类似的代码。这不是首选选项，因为您只是在“真正的”问题上贴上绷带，即您要求showErrors 显示不存在的错误（对于 jQuery Validation 插件）。你也可以只重载showErrors，但这会涉及更多。