jQuery Validate SubmitHandler 与 Ajax 提交没有被击中

Question

在我看来，我想使用 ajax 将表单提交给控制器。我有这个：

@section scripts{
    @Scripts.Render("~/bundles/jqueryval")

    <script>
        $(document).ready(function() {

            // Mask
            $("#Teu_Rate").mask("####.##", { reverse: true });
            $("#Mcsap_Rate").mask("####.##", { reverse: true });

            // Submission
            var redirectUrl = '@Url.Action("Index", "tblPersonnels")';
            var settings = {};
            settings.baseUri = '@Request.ApplicationPath';
            var infoGetUrl = "";
            if (settings.baseUri === "/Scalehouse") {
                infoGetUrl = settings.baseUri + "/tblPersonnels/Create/";
            } else {
                infoGetUrl = settings.baseUri + "tblPersonnels/Create/";
            }

            // ajax portion
            $("form").validate({
                submitHandler: function(form) {
                    $.ajax({
                        url: infoGetUrl,
                        method: "POST",
                        data: $("form").serialize(),
                        beforeSend: disableCreateBtn(),
                        success: function() {
                            console.log("success");
                            toastr.options = {
                                positionClass: "toast-top-full-width",
                                onHidden: function() {
                                    window.location.href = redirectUrl;
                                },
                                timeOut: 3000
                            }
                            toastr.success("Personnel successfully created")
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            toastr.options = {
                                positionClass: "toast-top-full-width",
                                onHidden: function() {
                                    enableCreateBtn();
                                },
                                timeOut: 3000
                            }
                            var status = capitalizeFirstLetter(textStatus);
                            var error = $.parseJSON(jqXHR.responseText);
                            console.log(error);
                        }
                    })
                }
            });

            function capitalizeFirstLetter(string) {
                return string.charAt(0).toUpperCase() + string.slice(1);
            }

            function disableCreateBtn() {
                $('#Personnel-Create-Btn').prop('disabled', true);
            }

            function enableCreateBtn() {
                $('#Personnel-Create-Btn').prop('disabled', false);
            }
        });
    </script>
}

请求完成并成功完成后，我应该会在控制台中收到一条消息和一个 toastr 通知，但我没有收到任何消息，也没有收到任何控制台错误，但我正在输入的记录是输入成功，这意味着表单正在通过常规 MVC 约定提交。

如何使我的 ajax 提交工作？

更新

在下面用 Sparky 发表评论后，我将代码更改为：

$("form").submit(function (t) {

    t.preventDefault();

        $.ajax({
            url: infoGetUrl,
            method: "POST",
            data: $("form").serialize(),
            beforeSend: disableCreateBtn(),
            success: function() {
                console.log("success");
                toastr.options = {
                    positionClass: "toast-top-full-width",
                    onHidden: function() {
                        window.location.href = redirectUrl;
                    },
                    timeOut: 3000
                }
                toastr.success("Personnel successfully created");
            },
            error: function(jqXHR, textStatus, errorThrown) {
                toastr.options = {
                    positionClass: "toast-top-full-width",
                    onHidden: function() {
                        enableCreateBtn();
                    },
                    timeOut: 3000
                }
                var status = capitalizeFirstLetter(textStatus);
                //var error = $.parseJSON(jqXHR.responseText);
                console.log(jqXHR);
            }
        });

    });

现在，如果表单为空..并且我点击了创建按钮.. ajax 会以某种方式进入成功功能，同时在某些必需的字段上给我我的验证错误.. 然后重定向到另一个页面，好像请求成功.. 有什么想法吗？

更新 2

我使用以下语法让它工作：

$("form").data("validator").settings.submitHandler =
    function(form) {
        $.ajax({
            url: infoGetUrl,
            method: "POST",
            data: $("form").serialize(),
            beforeSend: disableCreateBtn(),
            success: function () {
                console.log("success");
                toastr.options = {
                    positionClass: "toast-top-full-width",
                    onHidden: function () {
                        window.location.href = redirectUrl;
                    },
                    timeOut: 3000
                }
                toastr.success("Personnel successfully created.");
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log(jqXHR);
                toastr.options = {
                    positionClass: "toast-top-full-width",
                    onHidden: function () {
                        enableCreateBtn();
                    },
                    timeOut: 3000
                }
                var status = capitalizeFirstLetter(textStatus);
                var error = $.parseJSON(jqXHR.responseText);
                console.log(error);

                var modelState = error.modelState;
                //console.log(modelState);
                $.each(modelState,
                    function (key, value) {
                        var id = "";
                        if (key === "$id") {
                            id = "#" + key.replace('$', '').substr(0, 1).toUpperCase() + key.substr(2);
                        } else {
                            //console.log(key);
                            var status = capitalizeFirstLetter(textStatus);
                            toastr.error(status + " - " + modelState[key]);
                        }
                        var input = $(id);
                        //console.log(id); // result is #id
                        if (input) { // if element exists
                            console.log(id);
                            input.addClass('input-validation-error');
                        }
                    });
            }
        });
    }

我不知道为什么，但它正在工作.. 我很想知道为什么

Answer 1

我得到了它的工作并更新了我关于如何......但你能解释为什么这个语法比其他语法更有效吗？

.submit() 处理程序是个坏主意，因为它会干扰 jQuery Validate 插件处理表单提交事件的方式。 （基本上，您已经阻止了默认提交，然后从未将其转回验证插件。）不管是否使用 ASP，这绝对不是这样做的方法。 Validate 插件提供了submitHandler 函数，用于您需要捕获此事件的任何目的。

您的 .settings.submitHandler 有效，因为当您无权编写自己的 .validate() 方法（感谢 Unobtrusive Validation 插件）时，这是定义 submitHandler 函数的唯一方法。 As per the documentation，submitHandler 是“验证后通过 Ajax 提交表单的正确位置”。

---

所以如果我不使用不显眼的，那么我可以使用我的原始代码吗？

jQuery Validate 插件通过.validate() 方法初始化，通常在页面加载时。此方法只能调用一次，所有后续调用都将被忽略。当您使用 ASP 和 Unobtrusive Validation 插件时，它会为您构造和调用.validate() 方法，因此您不能再通过自己调用.validate() 来设置任何选项或规则。