Using validate and ajax load on the same button

Using validate and ajax load on the same button

Hey there guys,
check out this Ajax code:

[CODE]
$('#checkout').click(function()
 {
      $holder = ($('#details').serializeArray()); //gets everything from the form and puts it in associative array (holder)
    $.ajax({
        type: 'POST',
        url: 'index.php?route=payment/check/confirm',   //send array data to payment/check method confirm
        data: $holder,
        success: function() {
            location = '<?php echo $continue; ?>';       //if successful then proceed
        }        
    });
});
[/CODE]This is not my choice, it is used by the cms system opencart. They use a click event handler rather than a regular submit button to allow buyers a fallback should their ipn gateway of choice fail them.

Anyway this is a complete nuisance for me because I am trying to add some custom jquery validation using the validate plugin to check the form data before it is sent. I don't have the experience to prevent the default and then allow it again if validation is successful. Here is a short version of the validation script:

[CODE]$(document).ready(function(){
  $('#details').validate({
    rules: {
      bank_name: {
        required: true,
      },
      bank_location: {
        required: true,
      },
      acc_type: {
        required: true,
      },
      acc_number: {
        minlength: 8,
        number: true,
        required: true
      },
    },
    success: function(label) {
      label.text('OK!').addClass('valid');
    }
  });
});[/CODE]Shows how quickly considering users with js disabled is becoming a thing of the past - this is the latest release of oc. Hard for those of us who are used to allowing for them.

Can any of you javascript experts give me a workaround?