验证表单而不提交表单 [重复]

Validate form without submitting it [duplicate]

提问人：Jonathan Wood 提问时间：10/25/2023 更新时间：10/25/2023 访问量：25

问：

这个问题在这里已经有答案了：
单击表单中的按钮会导致页面刷新 （11 个答案）
29天前关闭。

我有一个以下 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非侵入式验证来验证表单数据。但是，我不想提交表格。

我有以下JavaScript。它按预期工作。但是，在代码运行后，将提交表单。

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

有谁知道为什么要提交表格以及如何阻止它？

javascript jquery unobtrusive-validation 客户端验证

评论

0赞 Barmar 10/25/2023
为函数提供参数和调用以防止提交。eventevent.preventDefault()
1赞 Barmar 10/25/2023
将按钮更改为type="button"

答：

1赞 n1md7 10/25/2023 #1

type=submit自动提交表单。由于您省略了该部分，因此默认为 .submit

您需要改用或通过调用来防止默认行为<button type="button"preventDefault()

$('#product-save').on('click', function (event) {
    event.preventDefault(); // <== This prevents it from submitting

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

评论

0赞 Jonathan Wood 10/25/2023
我以为会自动提交表格。type=submit
0赞 n1md7 10/25/2023
我认为这是因为默认值是用于按钮的，并且由于您省略了该部分，因此它认为是.如果您改用它，它无需调用即可正常工作submittype=submit<button type="button"preventDefault
0赞 Jonathan Wood 10/25/2023
是的，这就是正在发生的事情。谢谢。

上一个：EF Core 数据Razor 页面中未使用的批注

下一个：为什么 jQuery Validation 要添加 noValidate 属性？