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和先前的代码转储到控制台显示它们是相同的，但是当我尝试使用此代码时，在控制台中却出现了错误...

未捕获（承诺）TypeError：无法读取未定义的属性“ type” 在$ .validator.highlight（jquery.validate.js：344）在$ .validator.defaultShowErrors（jquery.validate.js：912）在$ .validator.showErrors（jquery.validate.js：546）在handleServerResponse（捐赠：305）

有问题的那一行是我称为showErrors

的那一行

有人可以帮助我吗？

更新只是为了澄清，我在循环中这样做的原因是服务器端代码返回三种类型的错误，与特定输入元素相关的普通错误，与一般输入相关的错误整个数据，以及特定于表格付款部分的数据。我只将第一种类型传递给jQuery.validate，因为第二种类型在表单的独立部分中显示，并且第三种类型必须以不同的方式处理，因为支付处理器会在{{1}中生成自己的HTML }，这意味着我必须手动添加错误。

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

Answer 1

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

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 );
        }
    },

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

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

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

卡住尝试模仿IE中的JavaScript动态属性

2 个答案: