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

Question

我有一个包含各种输入字段的表单，这些字段已使用 bootstrap 5 验证进行验证。

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

根据文档，以下代码负责：

// 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)
    })
  })()

现在我想在成功发送表单时执行 javascript function：

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

但是这个 function 现在总是在按下提交按钮时执行。 因此，即使某些输入字段还没有有效内容并且引导程序验证失败。

我看到必须将“已验证”添加到每个字段。 大概必须为此检查 forms 中的所有输入字段？ 不幸的是，我缺乏这方面的 javasctipt 知识。 有人可以指导我走正确的道路吗？

仅当引导程序验证成功时才执行我的 javascript function。

Answer 1

您可以在调用checkValidity()之后添加一个else子句：

// 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)
    })
  })()