验证后如何提交表格

Question

我有一个美丽的形式，可以与jQuery进行了很好的验证，但是在验证FOM后应该运行的功能在哪里？

以下是：

<form id="myForm" class=" needs-validation" novalidate>
    <div class="rendered-form">
       
        <div class="form-group row formbuilder-text form-group field-text-1650256863373">
            <label for="text-1650256863373" class="col-sm-2 formbuilder-text-label">Name<span class="formbuilder-required">*</span></label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="text-1650256863373" access="false" maxlength="50" id="text-1650256863373" required="required" aria-required="true">
            </div>
        </div>
        <div class="form-group row formbuilder-text form-group field-text-1650256864829">
            <label for="text-1650256864829" class="col-sm-2 formbuilder-text-label">E-mail:<span class="formbuilder-required">*</span></label>
            <div class="col-sm-10">
                <input type="email" class="form-control" name="text-1650256864829" access="false" maxlength="30" id="text-1650256864829" required="required" aria-required="true">
                <div class="invalid-feedback">e-mail</div>
            </div>
        </div>

        <div class="form-group row formbuilder-text form-group field-text-1650256865677">
            <label for="text-1650256865677" class="col-sm-2 formbuilder-text-label">Phone<span class="formbuilder-required">*</span></label>
            <div class="col-sm-10">
                <div class="input-group-prepend">
                    <div class="input-group-text">+1</div>

                    <input type="tel" class="form-control" name="text-1650256865677" access="false" maxlength="15" id="text-1650256865677" required="required" aria-required="true">
                </div>
               
            </div>
            </div>
        
                <div class="formbuilder-button form-group field-button-1650256992197">
                    <button type="submit"  class="btn-success btn" name="button-1650256992197" access="false" style="success" id="button-1650256992197">Подписать</button>
                </div>
            </div>
    
</form>

这是我的JavaScript验证：

  <script>
    // 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.prototype.slice.call(forms).forEach((form) => {
        form.addEventListener('submit', (event) => {
        if (!form.checkValidity()) {
        event.preventDefault();
        event.stopPropagation();
    }
    form.classList.add('was-validated');
    }, false);
    });
    })();


</script>

现在，当用户单击一个按钮提交时，如果表格已验证，则需要显示带有消息的警报窗口。我把它放在哪里？

Answer 1

我假设您的checkVality（）是一个布尔函数。

<script>
// 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.prototype.slice.call(forms).forEach((form) => {
        form.addEventListener('submit', (event) => {
            if(!form.checkValidity()) {
                // When is invalid
                alert('invalid');
                event.preventDefault();
                event.stopPropagation();
            } else {
                // When is valid
                alert('valid');
            }
            // On form submit whether valid or invalid
            alert('Was validated');
            form.classList.add('was-validated');
        }, false);
    });
})();
</script>

Answer 2

也许您可以尝试在脚本末尾添加想要的警报？如果您在逻辑的末尾进行脚本，它将显示它！

 <script>
// 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.prototype.slice.call(forms).forEach((form) => {
    form.addEventListener('submit', (event) => {
    if (!form.checkValidity()) {
    event.preventDefault();
    event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
alert('What you want to say to user');
})();


</script>

我想您可以将其放置在您想要的位置，但是在逻辑之后，查看它是否完全正确地运行。