Tengo un formulario Boostrap 5 con validaciones y cuando agrego el atributo data-bs-target para enviar el botón, el modal se activa incluso si el formulario tiene enteros no válidos. Quiero que el modelo se active solo cuando el formulario se valide correctamente. Lo probé con javascript pero mi código no funcionó. A continuación se muestra mi enfoque:
<div class="form-button mt-3"> <button id="submit" type="submit" class="site-btn " data-bs-toggle="modal" data-bs-target="">Send</button> </div> <script type="text/javascript"> (function() { 'use strict' const forms = document.querySelectorAll('.requires-validation') Array.from(forms) .forEach(function(form) { form.addEventListener('submit', function(event) { if (!form.checkValidity()) { event.preventDefault() event.stopPropagation() } form.classList.add('was-validated'), document.getElementById('submit').dataset.target ='#confrimationModal'; }, false) }) })() </script>Puede abrir modal programáticamente
const modal = new bootstrap.Modal(document.getElementById('confrimationModal')); modal.show();en vez de
document.getElementById('submit').dataset.target ='#confrimationModal';referencia https://getbootstrap.com/docs/5.0/components/modal/#via-javascript
data-bs-target (function() { 'use strict' document.addEventListener('submit', function(event) { const tgt = event.target; if (tgt.matches(".requires-validation") && !tgt.checkValidity()) { event.preventDefault() event.stopPropagation() } else { tgt.classList.add('was-validated'); document.getElementById('submitButton').dataset.bsTarget = '#confirmationModal'; } }) })() <div class="form-button mt-3"> <button id="submitButton" type="submit" class="site-btn" data-bs-toggle="modal" data-bs-target="">Send</button> </div>