Validate form without submitting it

Question

I have a the following Bootstrap modal.

<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>

I want to use jQuery unobtrusive validation to validate the form data. However, I do not want to submit the form.

I have the following JavaScript. It works as expected. However, after the code runs, the form is submitted.

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

Does anyone know why the form is being submitted and how to stop it?

Answer 1

type=submit submits the form automatically. Since you omitted that part it defaulted to submit.

You need to use <button type="button" instead or to prevent the default behavior by calling 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
    }
 }