miniShop2 icon indicating copy to clipboard operation
miniShop2 copied to clipboard

Валидация полей с типом поля: checkbox, radio в форме оформление заказа сниппет msOrder

Open OlegShchavelev opened this issue 1 year ago • 0 comments

Сообщение об ошибке / Error message

При внедрении формы заказа в проект, конкретнее: добавление дополнительных полей в соответствии с требованиями проекта. Поля с типом "checkbox" и "radio" при добавлении имен полей в окно настройки варианта доставки в поле "обязательные поля", не будут обязательными при оформлении заказа.

Дело в том что форма заказа miniShop2, асинхронная, и за формирование массива полей и их последующую обработку отвечает метод send класса Minishop2, который основан на сетевой технологии XMLHttpRequest. При обработке формы данные поля имеют значения value, тем самым при отправке формы мы не получим при выполнении функции submit в обратной функции "this.callbacks.submit.response.error" в ответе соответствующие названия полей с типом checkbox и radio.

При разметке формы следующим образом:

<form class="card" id="msOrder" method="post" style="--bs-card-title-spacer-y: 1rem;">
<input type="hidden" name="agree" value="">
...
 <div class="form-check input-parent fs-7">
                <input class="form-check-input" type="checkbox" id="agree" name="agree" checked="checked" value="1">
                <label class="form-check-label" for="agree[]">Отправляя форму, вы соглашаетесь <a href="">на обработку персональных данных</a></label>
</div>
...
</form>

Мы получим ошибку в консоли при открытии формы: image

C помощью Java Script

const order = document.querySelector('#msOrder')
order.querySelectorAll('[type="checkbox"]').forEach(el => {
  const value = el.value
  el.addEventListener('change', () => {
    el.checked === true ? el.setAttribute('value', value) : el.setAttribute('value', '')
    console.log(el)
  })
})

Немного лучше, так как сервер начинает отдавать при выполнении функции submit в ответ response с содержанием поля с типом checkbox при условии, что оно обязательное.

Проблемы которые я обнаружил при внедрении формы заказа:

  • Не могу воспользоваться классом miniShop2.Order при обработке полей (к примеру получить форму). А в событиях к примеру "load" в объекте window уже поздно исполнять приложенный участок кода, событие указанное в статье "minishop-loaded" в текущей версии отсутствует событие DOMContentLoaded объект document, аналогично.
  • Responce возмущается, только если value = 0, экспериментировал метод value, setAttribute, removeAttribute

image console.log(miniShop2.Order.order) в событии DOMContentLoaded объекта document image console.log(miniShop2.Order.order) в событии load объекта window

Шаг для воспроизведения / Step to play

  • добавить поле agree в настройки доставки в поле "обязательные поля"
  • выполнить в шаблоне страницы оформление заказа, вышеописанные действия изложенные в разделе Сообщение об ошибке

Настройки Minishop 2 Включить новый JavaScript? Да.

Ожидаемое поведение / Expected behavior

В классе MsOrder реализовать механизм обработки любых видов полей при валидации.

Environment

Версия miniShop2 2.4.1 версия MODX 2.8.5

OlegShchavelev avatar May 29 '23 16:05 OlegShchavelev