JQuery必填字段未停止Ajax表单提交

Question

我使用以下代码使用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();
                        }
                    }
                });
            });
        });

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

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);
});

它适用于发布到另一页的表单。

当使用Ajax提交代码时，当出现错误时，它会显示警报，但它仍会提交表单。

Answer 1

如果“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();
                    }
                }
            });
        });
    });

Answer 2

您只需在表单中添加onSubmit=“return CheckRequired（）”。

Answer 3

您可能希望将Check必需的返回封装到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();
                            }
                        }
                    }
                });
            });
        });