modx-pro / miniShop2

Second version of simple online shop for MODX Revolution
GNU General Public License v2.0
149 stars 128 forks source link

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

Open OlegShchavelev opened 1 year ago

OlegShchavelev commented 1 year ago

Сообщение об ошибке / 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 при условии, что оно обязательное.

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

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

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

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

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

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

Environment

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