jquery validation is forcing a double click on submit for form that submits to thickbox

Question

I have to click the submit button twice on my form in order to submit it after adding jQuery validation. There are other posts regarding this but those solutions are not working for me as my form submits to a thickbox popup which requires a GET method and certain variables to be passed. I am using jquery.validate/1.8/jquery.validate.min.js and jquery/1.5.2/jquery.min.js. I am not including rules as it is just one field (quantity) that I am validating with class 'number' to verify there is a value and it is a number.

Here is my code:

$(document).ready(function(){
// validate the form when it is submitted
  $("form.cart_form").validate({


    //adding submitHandler results in having to click twice 
    submitHandler: function(form) {

        $("form.cart_form").submit(function() {
        var title = "";
        var productID = $("select[name=product_id]", this).val();
        var quantity = $("input[name=quantity]", this).val();
        var url = "../cart/add-to-cart.php?product_id=" + productID + "&quantity=" + quantity + "&TB_iframe=true&height=300&width=600";
        tb_show(title, url, false);
        // submit the form 
        // return false to prevent normal browser submit & page navigation 
        return false; 
            });
     }

  }); 

}); 

I am by no means a jQuery expert, so thank you in advance for any solutions you can provide.

Answer 1

Your code in a too-much-recursion error: $("form.cart_form").submit() triggers another round of validation, resulting in another call to submitHandler, and voila, recursion. Replace that with form.submit()

$(document).ready(function(){
// validate the form when it is submitted
$("form.cart_form").validate({


//adding submitHandler results in having to click twice 
submitHandler: function(form) {

    form.submit(function() {
    var title = "";
    var productID = $("select[name=product_id]", this).val();
    var quantity = $("input[name=quantity]", this).val();
    var url = "../cart/add-to-cart.php?product_id=" + productID + "&quantity=" + quantity + "&TB_iframe=true&height=300&width=600";
    tb_show(title, url, false);
    // submit the form 
    // return false to prevent normal browser submit & page navigation 
    return false; 
        });
 }

}); 

});