单击提交按钮以进行引导模式和 parsley.js 验证后如何防止页面重新加载？答案

【问题标题】：How to prevent page reload after submit button clicked for bootstrap modal and parsley.js validation?单击提交按钮以进行引导模式和 parsley.js 验证后如何防止页面重新加载？
【发布时间】：2020-11-28 04:37:57
【问题描述】：

我有引导模式，它打开一个模式以允许用户输入表单并且它可以工作。我为表单验证实现了 parseley.js，它有点工作。问题是当验证通过时，它会重新加载页面（从下面的 gif 中可以看到），这不是我期望的行为。我期望在validateForm() 中看到alert('ok')。

这就是我定义表单标签和提交按钮的方式

<form id="myForm" data-parsley-validate="">
    <button class="btn btn-default" >Save</button>           
</form>

这是我使用 Parsely.js 验证表单的功能。当所有验证通过时，我希望看到 alert('ok') 但它没有。相反，它会重新加载页面。

function validateForm() {
    $('#myForm').parsley().on('field:validated', function () {
        debugger
        var ok = $('.parsley-error').length === 0;
        $('.bs-callout-info').toggleClass('hidden', !ok);
        $('.bs-callout-warning').toggleClass('hidden', ok);
    })

        .on('form:submit', function () {
            debugger
            alert('ok') // I expect to reach here when pass validation pass but it doesn't
            postCustomer();
            return false; 
        });
}

这是我的引导模式

$('#modalCustomerForm').on('shown.bs.modal', function () {
    debugger
    validateForm();
    return false;
})

如果我在下面添加示例代码，则 parsley 没有添加 css 类。我怀疑欧芹没有加载。但是，验证工作。当我按下提交按钮时，我可以在文本框底部看到红色错误消息。

<div class="bs-callout bs-callout-warning hidden">
    <h4>Oh snap!</h4>
    <p>This form seems to be invalid :(</p>
</div>

<div class="bs-callout bs-callout-info hidden">
    <h4>Yay!</h4>
    <p>Everything seems to be ok :)</p>
</div>

进一步的故障排除。如果我向按钮添加 id 并创建按钮单击事件，它不会自动重新加载页面。但如果我这样做，则 parsley.js 验证不起作用。

<button class="btn btn-default" type="submit" id="formBtn">Save</button>

$('#formBtn').on("click", function (e) {
    debugger

    postCustomer();
    debugger
    e.preventDefault();
})

这就是为什么我将我的postCustomer() 放在此处（下方）validateForm() 但它也不起作用：

.on('form:submit', function () {
    
    debugger
    alert('ok')
    postCustomer();
    return false; // Don't submit form for this demo
});

【问题讨论】：

你可以试试这个：.on('form:submit' , function(e) { e.preventDefault() })。让我知道这是否有效！
@dhruwlalan。我试过了，但还是同样的问题。
您的提交事件处理程序是否正常工作？如果不;尝试"submit" 而不是"form:submit" 作为事件参数。
只是submit 不起作用。 form:submit 工作

标签： javascript twitter-bootstrap-3 bootstrap-modal parsley.js

【解决方案1】：

确保您的渲染代码中没有嵌套的表单标签，如下所示：

<form data-parsley-validate="">
    <form id="#myForm" data-parsley-validate="">
        <button class="btn btn-default">Save</button>
    </form> 
</form>

页面在浏览器中呈现后，您可以检查此部分。否则，您的代码中没有stopPropagation 方法，可能会提交父表单并重新加载页面。

您代码中的以下语句应停止表单提交，只需删除您方法中的其他行进行测试。

.on('form:submit', function (e) {
    console.log("form submitted after validation");
    return false;
}

因此，在您的代码中，上述方法return false 中可能存在一些问题（异常）。作为 hack，您无需更改代码即可轻松添加新事件。

$('#myForm').submit(function (e)
{
    console.log("form submit called");
    e.preventDefault();
});

如果return false 没有帮助，这个新事件应该。在您验证之后，它会在表单顶部调用。

【讨论】：

@Steve 这对你有帮助吗？
如果我在带有点击事件的按钮上定义了一个 id，则验证不起作用。如果我没有在按钮上定义 id，验证工作但它会自动重新加载页面。
@Steve 注意，这不是按钮上的事件。这是直接在表单上的事件。没有添加新的id，也没有修改html结构。
我意识到我必须将 `$('#myForm').parsley()...` 放在根目录上。谢谢它现在可以工作了。
我已经更新了代码中的表单标识符以使其更清晰。

【解决方案2】：

您可以简单地从表单提交中获取事件，并阻止它采用表单提交后重新加载页面的默认方式。

.on('form:submit', function (e) {
e.preventDefault();
debugger
alert('ok')
postCustomer();
return false; // Don't submit form for this demo

});

【讨论】：