Застрял, пытаясь имитировать динамические свойства JavaScript в IE

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-совместимый код, чтобы сделать то же самое, но потерпел неудачу при каждой попытке. Я посмотрел на такие ответы, как этот и этот , но я просто не могу заставить что-либо работать.

Моей последней попыткой было следующее ...

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

Однако, несмотря на то, что выгрузка error и предыдущего кода в консоль показала, что они идентичны, при попытке использовать этот код я получаю сообщение об ошибке в консоли ...

Uncaught (в обещании) TypeError: Невозможно прочитать свойство 'type' из неопределенного в $ .validator.highlight (jquery.validate.js: 344) в $ .validator.defaultShowErrors (jquery.validate.js: 912) в $ .validator.showErrors (jquery.validate.js: 546) at handleServerResponse (Пожертвовать: 305)

В этой строке я звоню showErrors

Кто-нибудь может мне помочь?

Обновление просто чтобы уточнить, причина, по которой я делаю это в цикле, состоит в том, что код на стороне сервера возвращает три типа ошибок, обычные, связанные с конкретным элементом ввода, общие, относящиеся к данные в целом и те, которые относятся к разделу оплаты формы. Я передаю только первый тип jQuery.validate, так как второй тип отображается в независимой части формы, а третий тип должен обрабатываться по-разному, так как обработчик платежей генерирует свой собственный HTML в iframe, что означает I должны добавить ошибку вручную.

Второе обновление Оказывается, это был какой-то код в отдельной части страницы, который выбрасывал мой JavaScript. Код, который у меня был, и который показан в двух ответах, был в порядке, это была отдельная проблема.

Answer 1

Для создания объекта вы можете использовать цикл по массиву, который вы получаете из запроса AJAX, затем, используя скобочную нотацию для добавления свойств к объекту, вы можете передать его в showErrors(), что-то вроде этого:

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

Answer 2

Аналогично ответу Рори , но я бы использовал reduce, чтобы взять массив response.errors и преобразовать его в единицу со свойствами в нужном месте.

Обратите внимание, что метод showErrors принимает объект с парами ключ / значение, которые являются отображаемыми именами ввода и сообщениями, поэтому вам не нужно вызывать его в цикле.

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

---

Вероятно, вы видите ошибку здесь, в jquery.validate.js (эта ссылка ведет на источник, который составляет этот файл):

    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 не определено.

Вы можете это исправитьпо крайней мере двумя способами:

1. Убедившись, что ошибки, которые вы передаете в объект, относятся только к тем, где item1 (ключ свойства объекта) ссылается на именованный элемент (или имеет текоторые не помечены каким-либо образом, чтобы вы могли отфильтровать их).Это был бы предпочтительный и самый чистый способ сделать это.

2. Предоставляя свою собственную функцию highlight (если по какой-либо причине вы не можете изменить API).Очевидно, jQuery Validation позволяет передавать переопределения для некоторых из их функций, поэтому вы можете вызвать validate () с опциями и в этих опциях передать свою собственную функцию highlight.Возможно тот, который начинается с:

   if (!element) return;
   

   Я бы предложил также реализовать функцию unhighlight, так как она имеет похожий код.Это не предпочтительный вариант, потому что вы просто накладываете повязку на «реальную» проблему, которая заключается в том, что вы просите showErrors показать ошибки, которых не существует (для плагина jQuery Validation).Вы также можете просто перегрузить showErrors, но это немного сложнее.