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

此函数检查表单元素中的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，但仍然会提交表单。

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

Answer 2

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

Answer 3

如果＆＃39; CheckRequired（）＆＃39;返回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 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();">

JQuery需要不停止Ajax表单提交的字段

4 个答案: