Bootstrap 5：仅使用经过验证的表单运行 javascript

Question

I have a form with various input fields that are validated using bootstrap 5 validation.

<form class="needs-validation asset-test" action="{{ url_for('asset_test') }}" method="post" novalidate>
[...]
</form>

According to the documentation, the following code is responsible for this:

// Example starter JavaScript for disabling form submissions if there are invalid fields
(() => {
    '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.from(forms).forEach(form => {
      form.addEventListener('submit', event => {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }
  
        form.classList.add('was-validated')
      }, false)
    })
  })()

Now I want to execute a javascript function on a successful form send:

$('.asset-test').on('submit', function () {
    alert('form submitted');
});

But this function is now always executed when the submit button is pressed. So even if some input fields do not have valid content yet and the bootstrap validation fails.

I see that 'was-validated' must be added to each field. Presumably all input fields in the forms must be checked for this? Unfortunately I lack the javasctipt knowledge for this. Can someone please guide me on the right path?

Execute my javascript function only if the bootstrap validation was successful.

Answer 1

You could add an else clause after the call of checkValidity() :

// Example starter JavaScript for disabling form submissions if there are invalid fields
(() => {
    '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.from(forms).forEach(form => {
      form.addEventListener('submit', event => {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
          console.log("invalid form");
        } else {
          console.log("valid form");
          //add some code here
        }
  
        form.classList.add('was-validated')
      }, false)
    })
  })()