Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
OlegShchavelev opened this issue May 29, 2023 · 0 comments
Labels

Comments

@OlegShchavelev
Copy link

Сообщение об ошибке / 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant