Bootstrap模态框表单验证后自动提交的原因及阻止方法咨询

我有一个Bootstrap模态框，代码如下：

<div id="product-modal" class="modal" tabindex="-1" role="dialog">
    <form>
        <input id="product-index" type="hidden" />
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 id="edit-title" class="modal-title"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label asp-for="ShipProduct.ProductId" class="control-label"></label>
                                <select asp-for="ShipProduct.ProductId" class="form-select" asp-items="Model.ProductOptions"></select>
                                <span asp-validation-for="ShipProduct.ProductId" class="text-danger"></span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="product-uom" class="control-label">Unit of Measurement</label>
                                <input id="product-uom" type="text" class="form-control" readonly />
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label asp-for="ShipProduct.InboundQuantity" class="control-label">Inbound Quantity</label>
                                <input asp-for="ShipProduct.InboundQuantity" class="form-control" />
                                <span asp-validation-for="ShipProduct.InboundQuantity" class="text-danger"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="product-save" class="btn btn-primary">Save</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </form>
</div>

我想用jQuery Unobtrusive Validation验证表单数据，但不想提交表单。目前的JavaScript代码验证功能正常，但执行后表单会自动提交：

$('#product-save').on('click', function () {
    var $modal = $('#product-modal');
    var $form = $modal.find('form');
    $form.validate();
    if ($form.valid()) {
        // Process input data
    }
 }

请问表单自动提交的原因是什么？如何阻止该行为？

原因 #

表单内的<button id="product-save">未指定type属性，HTML规范中，表单内的按钮默认type为submit，点击后会触发表单的默认提交行为。即便你通过jQuery Validation完成了验证，浏览器依然会执行这个默认动作，导致表单提交。

另外，你的JavaScript代码末尾缺少闭合的)，会引发语法错误，建议一并修复。

解决方法 #

方法1：修改按钮的type属性 #

直接给Save按钮添加type="button"，明确它是普通按钮，不会触发表单提交：

<button id="product-save" type="button" class="btn btn-primary">Save</button>

方法2：在事件中阻止默认行为 #

如果不想改动HTML，可以在点击事件处理函数中，调用event.preventDefault()来阻止按钮的默认提交动作：

$('#product-save').on('click', function (event) {
    // 阻止默认提交行为
    event.preventDefault();
    
    var $modal = $('#product-modal');
    var $form = $modal.find('form');
    $form.validate();
    if ($form.valid()) {
        // Process input data
    }
});

内容的提问来源于stack exchange，提问作者Jonathan Wood