submitHandler 未触发（jQuery 验证）

Question

在我的 ASP.NET MVC 应用程序中，我有一个使用 jQuery 验证的表单。验证似乎工作正常（即，如果缺少任何必填字段，它不会执行任何操作），但是当存在有效表单时，页面只是 "refreshes" 并将所有数据作为 URL 查询参数并且 submitHandler 从未被调用（在被调用的 API 方法和 submitHandler 中的 console.log 中作为断点进行了测试）。已在 Chrome 和 IE.

中测试

我的表单位于 jQuery UI 模式对话框中，但这似乎并不重要，因为当它不在一个对话框中时它也不起作用。尽管 SO 上存在几个类似的问题，但我一直找不到任何解决方案。这是我的代码：

表格HTML（剃须刀）：

<div id="modify-sale">
    <div>
        <form id="new-entry">
            <div style="overflow-y: auto; height: 475px;">
                <div class="form-group form-inline">
                    <label for="client">Client</label>
                    <div class="tt-container">
                        <input type="text" name="client" id="client" class="form-control" placeholder="Client" required />
                    </div>
                </div>  
                <div class="form-group form-inline">
                    <label for="notes">Notes</label>
                    <input type="text" name="notes" id="notes" value="" class="form-control" placeholder="Notes" />
                </div>
                <div class="form-group form-inline">
                    <label for="repId">Rep</label>
                    @Html.DropDownList("repId", new SelectList(Model.Reps, "id", "name"), "Rep", new { @class = "form-control", required = "" })
                </div>
                <div class="form-group form-inline">
                    <label for="dateOfSale">Date of Sale</label>
                    <input type="text" name="dateOfSale" id="dateOfSale" required class="form-control" />
                </div>
                <div class="form-group form-inline">
                    <label for="amount">Amount</label>
                    <input type="text" class="form-control" name="amount" id="amount" required />
                    @Html.DropDownList("currencyId", new SelectList(Model.Currencies, "id", "abbreviation"), new { @class = "form-control" })
                </div>
            </div>

            <hr style="margin-top: 10px; margin-bottom: 15px;"/>
            <input type="text" name="clientId" id="clientId" value="0" hidden />
            @Html.AntiForgeryToken()
            <button class="btn btn-primary">Save</button>
        </form>
    </div>
</div>

脚本：

$(document).ready(function () {

    var validator = $("#new-entry").validate({
        submitHandler: function (form) {
            console.log("Submitted");
            var sale;

            sale.clientId = $("#clientId").val();
            sale.notes = $("#notes").val();
            sale.repId = $("#repId").val();
            sale.dateOfSale = $("#dateOfSale").val();
            sale.amount = $("#amount").val();
            sale.currencyId = $("#currencyId").val();

            $.ajax({
                url: "/api/sales/new",
                method: "POST",
                data: sale
            });

            return false;
        }
    });

    var dialog = $("#modify-sale").dialog({
        autoOpen: false,
        height: 600,
        width: 450,
        modal: true
    });

    $("#add-new").button().on("click", function () {
        dialog.dialog("open");
    });
});

Answer 1

你的 submitHandler 正在触发，但由于你在这里触发 JavaScript 错误，一切都在此时停止。

TypeError: undefined is not an object (evaluating sale.clientId = $("#clientId").val())

使用 .serialize() 收集表单数据，而不是尝试分别捕获每个字段。

$.ajax({
    url: "/api/sales/new",
    method: "POST",
    data: $(form).serialize();
});

演示：jsfiddle.net/9rxxz821/

您的原始变量声明是 JavaScript 错误的根源。

应该是：var sale = {};

演示：jsfiddle.net/v5rptdmL/

submitHandler 未触发（jQuery 验证）

submitHandler not firing (jQuery validate)

forms

asp.net

asp.net-mvc

jquery

jquery-validate