JQuery required fields not stopping Ajax form submit

Question

I'm using this code to submit a form using 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();
                        }
                    }
                });
            });
        });

This function checks for required classes in form elements

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

I then have this code which automatically checks all my forms for required fields using the above function:

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

It works fine on forms that POST to another page.

When using the Ajax submit code, its display the alert when there is an error, but its still submitting the form.

Answer 1

You might want to enclose the return of CheckRequired into an if() structure :

$(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

If the 'CheckRequired()' return false, you need to stop the script by returning 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

Two ways to approach this:

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