My form can not be submitted even if "true" is returned in the submithandler function, what's wrong

Question

This is the jQuery code:

$(document).ready(function(){ 
    $("#digitalchange").validate({ 
        rules: {
            addbalance: {
                digits:true,
                min:20,
                max:1000
            },
            addquota: {
                digits:true,
                min:5,
                max:1000
            },
            reducequota: {
                digits:true,
                min:1,
                max:50
            }
        },
        submitHandler: function() {
            var var1=$('#addquota').val();
            var var2=$('#reducequota').val();
            if(var1!='' && var2!='') {
                alert('You can only add shortall or reduce shortall.');
                return false;
            }
            return true;
        },
        messages: {
        }
    });
});

The problem is that the form of digitalchange won't submit no matter how. When I comment out

submitHandler: function(){
    var var1=$('#addquota').val();
    var var2=$('#reducequota').val();
    if(var1!='' && var2!='') {
        alert('You can only add shortall or reduce shortall.');
        return false;
    }
    return true;
},

then the form can be submitted. What's wrong?

I changed return true; to $("#digitalchange").submit();, the form can be submitted. However, there is a significant(or obvious) delay before submit when I click the "submit" button, what's wrong? How to get rid of the delay?

submitHandler: function(form) {
    var var1=$('#addquota').val();
    var var2=$('#reducequota').val();
    if(var1!='' && var2!='') {
        alert('You can only add shortall or reduce shortall.');
        return false;
    }
    form.submit();
},

does not work.

Answer 1

Try replacing your submitHandler with this.

submitHandler: function(form) {
    var var1=$('#addquota').val();
    var var2=$('#reducequota').val();
    if(var1!='' && var2!='') {
        alert('You can only add shortall or reduce shortall.');
        return false;
    }
    form.submit();
},

---

Additionally you should read upon the submitHandler option and the Validation: Too much recursion part in the Validation documentation.

The documentation states

submitHandler

Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit

So returning true won't do anything AFAIK. As you also could decide to not submit or do something totally different. The samples also clearly show that using the form element (passed as a parameter to the submitHandler function) is the right way to go.

Use submitHandler to process something and then using the default submit. Note that "form" refers to a DOM element, this way the validation isn't triggered again.

$(".selector").validate({
    submitHandler: function(form) {
        // do other stuff for a valid form
        form.submit();
    }
})

While the Too much recursion part in the documentation states that using $("#digitalchange").submit(); (which is equal to the $(form).submit() in the documentation samples) will cause a recursion as it triggers you validation again and again (thus the noticeable delay).