jQuery 验证 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

I got it working and updated my question as to how.. but could you explain why this syntax works over the others?

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

您的 .settings.submitHandler 之所以有效，是因为当您无权编写自己的 .validate() 方法（感谢 Unobtrusive Validation 插件）时，这是定义 submitHandler 函数的唯一方法。 As per the documentation,submitHandler就是"right place to submit a form via Ajax after it is validated".

so if I were not to use the unobtrusive, then I could use my original code?

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

jQuery 验证 SubmitHandler Ajax 提交未被命中

jQuery Validate SubmitHandler with Ajax Submission Not being hit

ajax

asp.net-mvc

jquery

jquery-validate

unobtrusive-validation