主页 / coding / 问题 / 77355069
Accepted
Jonathan Wood
Asked: 2023-10-25 03:56:05 +0800 CST

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

  • 772

我有以下引导模式。

<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

1 个回答

  1. Best Answer

    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
    }
 }
    • 1

相关问题