jQuery Validation plugin: submitHandler not preventing default on submit when making ajax call to servlet - return false not working

Question

I have a simple form that uses jquery and a servlet. The jquery makes an ajax call to the servlet, the servlet makes some server side calculations, then displays the result

Answer 1

$('#post_form_jason_data').click(function() {
$('#myform').validate({ 
    rules: {
        txtwtrt: {
            required: true
           // email: true
        },
        tax_name: {
            required: true,
            minlength: 5
        },
    tax_rate: {
            required: true
            //minlength: 5
        }
    }
});
alert('insert the value');
if (('#myform').valid()){


        $.ajax({
            url: "swt_tax_add.html",
            type: 'POST',
            data : $('#myform').serialize(),                
            success: function(msg) {
                window.location.href='swt_tax/?st=1';
                $('#message').html(msg);            

            }

        });
    }

        return false;
    });

Answer 2

By the time the submit event has fired it's too late to prevent the form from submitting. You should bind to the click event on the submit button and use event.preventDefault() to stop it from submitting. If your validation routine completes successfully you can use $.serialize() and $.submit() to manually submit the form.

Answer 3

I know many people have answered but i'll show my entire code in 2020

$(document).ready(function () {
    $("#PaymentModeForm").validate({
        rules: {
            "f_cheque_mode_display": {
                required: true,
            },
            "f_cheque_infavour": {
                required: true,
            },
            "f_cheque_payablein": {
                required: true,
            },
            "f_cheque_address": {
                required: true,
            },
            "f_cheque_mobileno": {
                required: true,
            },
            "f_bank_mode_display": {
                required: true,
            },
            "f_bank_beneficiary": {
                required: true,
            },
            "f_bank_acc": {
                required: true,
            },
            "f_bank_bankname": {
                required: true,
            },
            "f_bank_branchname": {
                required: true,
            },
            "f_bank_ifsc": {
                required: true,
            },
            "f_cod_mode_display": {
                required: true,
            },
            "f_cod_mode_charges": {
                required: true,
            },
            "f_razorpay_mode_display": {
                required: true,
            },
            "f_razorpay_key": {
                required: true,
            },
            "f_razorpay_secret": {
                required: true,
            }
        },
        messages: {
            "f_cheque_mode_display": {
                required: "Enter Payment mode display on website"
            },
            "f_cheque_infavour": {
                required: "Enter Infavour Of",
            },
            "f_cheque_payablein": {
                required: "Enter Payble In",
            },
            "f_cheque_address": {
                required: "Enter Courier Address",
            },
            "f_cheque_mobileno": {
                required: "Enter Mobile No",
            },
            "f_bank_mode_display": {
                required: "Enter Payment mode display on website"
            },
            "f_bank_beneficiary": {
                required: "Enter Beneficiary Name",
            },
            "f_bank_acc": {
                required: "Enter A/C No",
            },
            "f_bank_bankname": {
                required: "Enter Bank Name",
            },
            "f_bank_branchname": {
                required: "Enter Branch Name",
            },
            "f_bank_ifsc": {
                required: "Enter IFSC Code",
            },
            "f_cod_mode_display": {
                required: "Enter Payment mode display on website",
            },
            "f_cod_mode_charges": {
                required: "Enter COD Charges",
            },
            "f_razorpay_mode_display": {
                required: "Enter Payment mode display on website",
            },
            "f_razorpay_key": {
                required: "Enter Key Id",
            },
            "f_razorpay_secret": {
                required: "Enter Secret Key",
            }
        },
        submitHandler: function (form, e) { 
            e.preventDefault();
            var form = $(this);
            var url = "/PaymentModeSubmit";
            $.ajax({
            type: "POST",
            url: url,
            data: $("#PaymentModeForm").serialize(),
            success: function(data)
            {
                alert(data);
            }
            });      
        return false;
        }
    });
    return
});

Answer 4

To resolve the problem, I validate the form separately my form submit handler. I simply put a check for validity inside the form submit, executing the ajax call only if true. This allows the action of the submit event to be handled (preventDefault()) regardless if the ajax call is made or not.

form.validate({
    rules: {
        number0: ruleSet,
        number1: ruleSet,
        number2: ruleSet,
        number3: ruleSet,
    }
});

form.submit (function(event) {
    if (form.valid())
    {
        $.ajax({
            type: form.attr("method"), // use method specified in form attributes
            url: form.attr("action"), // use action specified in form attributes
            data: form.serialize(), // encodes set of form elements as string for submission
            success: function(data) {
                // get response from servlet and display on page via jQuery 
            }
        });
    }
    event.preventDefault(); // stop form from redirecting to java servlet page
});

Answer 5

You can have event as the second parameter of submitHandler and can do preventDefault there itself.

submitHandler: function (form, event) {
    event.preventDefault();
    // your remaining code goes below this.
}