submitHandler not firing (jQuery validate)

Question

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

我的表单在 jQuery UI 模式对话框中，但这似乎并不重要，因为它不在 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 错误，因此此时一切都停止了。

类型错误： 未定义不是对象 (计算sale.clientId = $("#clientId").val() (

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

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

演示：jsfiddle.net/9rxxz821/

---

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

应为：var sale = {};

演示：jsfiddle.net/v5rptdmL/