JQuery 必填字段不会停止 Ajax 表单提交答案

【问题标题】：JQuery required fields not stopping Ajax form submitJQuery 必填字段不会停止 Ajax 表单提交
【发布时间】：2015-11-22 13:57:56
【问题描述】：

我正在使用此代码通过 Ajax 提交表单：

$(document).ready(function(){
            $("#SubmitTicket").submit(function(e){
                CheckRequired();
                e.preventDefault();
                dataString=$("#SubmitTicket").serialize();
                $.ajax({
                    type: "POST",
                    url: "?SubmitTicket=1",
                    cache: false,
                    data: dataString,
                    success: function(res) {
                        if(res.indexOf("success")!=-1) {
                            //window.location.href = res.substr(8);
                            $("#CreateNewTicket_Body").html(res);
                            $("#CreateTicket").hide();
                        }
                    }
                });
            });
        });

此函数检查表单元素中的required 类

function CheckRequired(event) {
    var $form = $(this);

    var emptyElements = $form.find('.required').filter(function() {
        return this.value === ''
    });

    if(emptyElements.length > 0) {
        event.preventDefault();

        emptyElements.addClass("EmptySelect").attr('title', 'This field is required');

        //alert(emptyElements.attr("id"));
        alert("One or more fields cannot be blank");

        return false;
    }
}

然后我有这段代码，它使用上述函数自动检查我所有的表单中的必填字段：

$(document).ready(function () {
    $('form').on('submit', CheckRequired);
});

它适用于 POST 到另一个页面的表单。

使用Ajax提交代码时，出错时显示alert，但仍然提交表单。

【问题讨论】：

您在哪个浏览器上测试它？火狐？
能否提供 MCVE 复制问题？

标签： javascript jquery ajax

【解决方案1】：

您可能希望将 CheckRequired 的返回值包含在 if() 结构中：

$(document).ready(function(){
            $("#SubmitTicket").submit(function(e){
                if(CheckRequired.call(this,e)) { // this should refer to the event target element, i.e. the form element, providing context for the function
                    e.preventDefault();
                    dataString=$("#SubmitTicket").serialize();
                    $.ajax({
                        type: "POST",
                        url: "?SubmitTicket=1",
                        cache: false,
                        data: dataString,
                        success: function(res) {
                            if(res.indexOf("success")!=-1) {
                                //window.location.href = res.substr(8);
                                $("#CreateNewTicket_Body").html(res);
                                $("#CreateTicket").hide();
                            }
                        }
                    }
                });
            });
        });

【讨论】：

不应该是 if(!CheckRequired) 吗？
我不这么认为，因为 CheckRequired 是作为事件处理程序构建的，它的布尔返回值在这里表示“我们应该继续处理事件吗？（是/否）”。为了安全起见，您可能还希望在函数末尾为默认情况返回 true。
好的，我仍然看到错误是正确的，但它仍在提交表单
我不需要使用 if(CheckRequired("#form_id")) { ... }
我的错，你是对的，实际上它期望事件作为一个参数 - 相应地更新我的答案。

【解决方案2】：

您可以在表单中简单地添加 onSubmit="return CheckRequired()"。

【讨论】：

【解决方案3】：

如果 'CheckRequired()' 返回 false，则需要通过返回 false 来停止脚本。

 $(document).ready(function(){
        $("#SubmitTicket").submit(function(e){
            e.preventDefault();
            if (!CheckRequired(e)) {
                   return false;
            }
            dataString=$("#SubmitTicket").serialize();
            $.ajax({
                type: "POST",
                url: "?SubmitTicket=1",
                cache: false,
                data: dataString,
                success: function(res) {
                    if(res.indexOf("success")!=-1) {
                        //window.location.href = res.substr(8);
                        $("#CreateNewTicket_Body").html(res);
                        $("#CreateTicket").hide();
                    }
                }
            });
        });
    });

【讨论】：

不起作用，如下所示 CheckRequired() 期望表单元素作为上下文来做它的事情。
是的，你是对的，我没有看到，这种情况下form元素可以通过CheckRequired($(this).closest('form'))，或者你可以得到来自事件的表单（e.target 或 e.currentTarget）

【解决方案4】：

两种解决方法：

A) Javascript

$(document).ready(function(){
    $("#SubmitTicket").submit(function(e){
        if(!CheckRequired()) return false; // THIS!
        e.preventDefault();
        dataString=$("#SubmitTicket").serialize();
        $.ajax({
            type: "POST",
            url: "?SubmitTicket=1",
            cache: false,
            data: dataString,
            success: function(res) {
                if(res.indexOf("success")!=-1) {
                    //window.location.href = res.substr(8);
                    $("#CreateNewTicket_Body").html(res);
                    $("#CreateTicket").hide();
                }
            }
        });
    });
});

B) HTML：

<form id="SubmitTicket" onSubmit="return CheckRequired();">

【讨论】：

这意味着我需要浏览并更改整个网站的代码（很多表单（：）