Naja + bootstrap 5 forms validation

Kalfi

Ahoj,
mám vytvořený formulář, který odesílám ajaxem pomocí naja.js. Vše funguje jak má, validace funguje přes netteForms.js, chybové hlášky validace jsou v alertu.

<form n:name="vehiclesForm" class="align-items-center ajax" data-naja-history="replace">
.......

Pokud však chci připojit validaci i pomocí bootstrap viz. https://getbootstrap.com/…/validation/

(function () {
  'use strict'

  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  const forms = document.querySelectorAll('.needs-validation')

  // Loop over them and prevent submission
  Array.prototype.slice.call(forms)
    .forEach(function (form) {
      form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }

        form.classList.add('was-validated')
      }, false)
    })
})()

Zůstane validace stejná.
Bez odeslání ajaxem (naja.js) validace pomocí bootstrap funguje

<form n:name="vehiclesForm" class="align-items-center needs-validation">
.......

Nemůžu přijít na to, jak to s naja.js propojit.

Pepino

Tak netteForms.js odlinkuj, když ho nechceš používat.

Případně validaci vypneš: https://forum.nette.org/…-v-js-alertu#…

Editoval Pepino (15. 2. 2023 10:44)

Kalfi

Pepino napsal(a):

Tak netteForms.js odlinkuj, když ho nechceš používat.

Případně validaci vypneš: https://forum.nette.org/…-v-js-alertu#…

Ahoj díky za reakci, netteForms.js jsem vynechávat nechtěl, alert mnohdy bouchne uživatele do oka více než červené políčko. Mordoval jsem se s tím hodně dlouho a nakonec jsem se prokousal k tomuto

naja.uiHandler.addEventListener('interaction', (event) => {
  if (event.detail.element.hasAttribute('data-send')) {
    const forms = document.querySelectorAll('.needs-validation');
    Array.prototype.slice.call(forms)
      .forEach(function (form) {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }

        form.classList.add('was-validated')
      }, false)
  }
});

což mi problém vyřešilo. Po zavření alertu se zbarví i formulářová políčka podle validace. Odesílacímu tlačítku jsem přidal data-send atribut. Díky za čas a odpověď