单击 bootstrap 模态和 parsley.js 验证提交按钮后如何防止页面重新加载？

Question

我有 bootstrap 模态，它打开一个模态以允许用户输入表单并且它有效。我为表单验证实现了 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; 
        });
}

这是我的bootstrap模态

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

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

<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
});

Answer 1

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

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

});

Answer 2

确保您的呈现代码中没有像下面这样的嵌套表单标签：

<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 没有帮助，这个新活动应该有帮助。验证后，它会在表单顶部调用。

单击 bootstrap 模态和 parsley.js 验证提交按钮后如何防止页面重新加载？

How to prevent page reload after submit button clicked for bootstrap modal and parsley.js validation?

javascript

twitter-bootstrap-3

bootstrap-modal

parsley.js