Question

在我的ASP.NET MVC应用程序中，我有一个使用jQuery验证的表单。验证似乎工作正常（即如果缺少任何必填字段，它不会做任何事情），但是当存在有效表单时，页面只是“刷新”所有数据作为URL查询参数和{{1}永远不会被调用（在被调用的API方法和submitHandler内的console.log中作为断点进行测试）。它已经在Chrome和IE中进行了测试。

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

表格HTML（剃须刀）：

submitHandler

脚本：

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

Answer 1

您的submitHandler 已触发，但由于您在此处触发了JavaScript错误，所有内容都会在此时停止。

TypeError：undefined不是对象（评估sale.clientId = $("#clientId").val()）

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

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

DEMO：jsfiddle.net/9rxxz821/

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

应该是：var sale = {};

DEMO：jsfiddle.net/v5rptdmL/

submitHandler没有触发（jQuery验证）

1 个答案: