Question

我的网站上有一个结帐表单，它使用Bootstrap实现的自定义验证方法。它有一个JavaScript函数，可以防止表单被正确填写多次提交。我正在使用SO上通常建议的技术来禁用提交，尽管使用的是vanilla而不是JQuery。这是功能：

function submitForm() {
    // 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(thisForm) {
        event.preventDefault();
        if (thisForm.checkValidity() === false) {
            event.stopPropagation();
        }
        thisForm.classList.add('was-validated');
        <?php if(isset($shipping)){
            echo "stripe.createToken(card).then(function(result) {
                if (result.error) {
                    // Inform the user if there was an error
                } else {
                    thisForm.addEventListener('submit', function(event){
                        event.preventDefault();
                        return false;
                    });
                    // Send the token to the server
                    console.log('Sending token ' + result.token + '.');
                }
            });";
        }?>
    });
};

表单创建如下：

<form id="payment-form" onsubmit="return submitForm()" class="needs-validation" novalidate>

当我正确填写表单测试页面时，双击“提交”按钮会将“发送令牌”消息打印到控制台两次，此时应该只发生一次。我想也许是因为它需要很长时间才能到达禁用表单的函数部分，但无论单击按钮多少次，都会再次打印该消息。

Answer 1

要停止提交表单，请致电event.preventDefault()或return false;

<form onsubmit="handleSubmit"></form>

handlesubmit(event) {
  event.preventDefault();
  // or return false;
}

Answer 2

使用内联事件处理程序是一种不好的做法，导致代码性能差，难以管理的代码。请认真考虑使用JavaScript附加您的活动，例如：https://developer.mozilla.org/en/DOM/element.addEventListener

您在点击表单时未使用event调用验证函数 - 然后引用event.preventDefault();，但未定义event。

尝试这样的事情。删除onsubmit属性，然后执行：

[...document.querySelectorAll('.needs-validation')].forEach((thisForm) => {
  thisForm.addEventListener('submit', (event) => { // add the event argument here
    event.preventDefault();
    if (thisForm.checkValidity() === false) {
      // rest of your code

（但是，我不明白为什么你一直在使用.filter这一点在这里没有意义 - 你是不是想使用forEach？如果有＆＃ 39;只有一个#payment-form，你自己不能选择它吗？）

为什么我的声明禁止表单提交工作？

2 个答案: