javascript - 仅在表单有效时调用 JS onsubmit

Question

我是 JS 新手。我有一个引导表单并使用验证，如下所示：

<form class="needs-validation" novalidate onsubmit="myFunction();">
            <div class="form-group row col-sm-3">
                <label for="exampleInput">Value</label>
                <input type="text" class="form-control" id="exampleInput" placeholder="Enter value" required>
                <div class="invalid-feedback">
                    Value required
                </div>
            </div>
</form>

和JS代码：

    <script>
        (function() {
            'use strict';
            window.addEventListener('load', function() {
                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                var forms = document.getElementsByClassName('needs-validation');
                // Loop over them and prevent submission
                var validation = Array.prototype.filter.call(forms, function(form) {
                    form.addEventListener('submit', function(event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            }, false);
        })();
    </script>

验证工作正常，但 myFunction() 总是在表单无效和有效时调用。

我怎么能强制 myFunction() 仅在表单有效时才被调用？

标签： javascripttwitter-bootstrapformsvalidationbootstrap-4