Show bootstrap modal if form is valid

Question

Rookie with jQuery, I would like to know if the code below is correct or if it could be improved. I would like to show a Bootstrat 5 modal if the newsletter form is valid. Seems to be working (except the focus) but not sure if it's the best way to achieve this result.

var newsletterForm = document.getElementById('footer-newsletter-form');
newsletterForm.addEventListener('submit', function(event) {
  if (!newsletterForm.checkValidity()) {
    event.preventDefault()
    event.stopPropagation()
  } else {
    newsletterForm.classList.add('was-validated');
    var recipient = newsletterForm.querySelector('input[type="email"]').value;
    var modal = document.getElementById('modal-newsletter');
    var modalName = modal.querySelector('#newsletter-name');
    var modalEmail = modal.querySelector('#newsletter-email');
    modalEmail.value = recipient;
    modal.addEventListener('shown.bs.modal', function() {
      modalName.focus();
    });

    $('#modal-newsletter').modal('show');
    event.preventDefault();
  }
  newsletterForm.classList.add('was-validated');
}, false);

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<!-- Newsletter modal -->
<div class="modal fade" tabindex="-1" id="modal-newsletter" role="dialog">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content shadow border-0">
      <!-- Newsletter modal header -->
      <div class="modal-header">
        <h5 class="modal-title">Abonnez-vous à notre newsletter</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <!-- Newsletter modal body -->
      <div class="modal-body p-4">
        Content
      </div>
    </div>
  </div>
</div>


<form class="needs-validation" id="footer-newsletter-form" novalidate>
  <label for="footer-newsletter-email" class="form-label">Subscribe to our newsletter</label>
  <div class="input-group">
    <input type="email" id="footer-newsletter-email" class="form-control rounded-start ps-5" aria-label="Newsletter" required />
    <div class="invalid-feedback position-absolute top-100 start-0">Please enter valid email address</div>
    <button type="submit" id="submit-footer" class="btn btn-primary">Subscribe</button>
  </div>
</form>

Thanks for your help.