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

Posted 2023-05-08

【中文标题】jQuery Validate SubmitHandler 与 Ajax 提交没有被击中

【英文标题】：jQuery Validate SubmitHandler with Ajax Submission Not being hit

【发布时间】：2019-02-11 20:39:18

【问题描述】：

在我看来，我想使用 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');
                        
                    );
            
        );
    

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

【问题讨论】：

您是否在使用 ASP 内置的 Unobtrusive Validation 插件？

说实话，我不太确定，但在我的 bundle.config 中，我没有引用任何名称为 jquery.validate.unobtrusive.js 的脚本。在我看来，我唯一引用的是：@Scripts.Render("~/bundles/jqueryval")

@Sparky 在我的源代码中，当我检查一个元素时，它确实具有 data-val-required 属性，根据我的研究，这是不引人注目的？

@Sparky 抱歉，在我的 Bundle 配置中我有 bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.validate*"));，其中包含 jquery.validate.unobtrusive，因为 *.. 所以是的，我使用的是不显眼的

Unobtrusive 自动构造.validate() 方法。由于您只能拨打.validate() 一次，因此在使用Unobtrusive 时，您拨打.validate() 的电话将被忽略。

【参考方案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() 来设置任何选项或规则。

【讨论】：

好的，如果我不使用不显眼的，那么我可以使用我的原始代码吗？那么，到目前为止，我所拥有的是正确的？

@M12Bennett，基本上是的，假设您的原始代码没有遗漏您想要的任何选项。如果没有 Unobtrusive 插件，您将使用您希望的任何规则和选项编写自己的 .validate() 方法。否则，Unobtrusive 会为你做这件事......因此术语：“unobtrusive”