Cannot Validate and send form data

JavaScript
1

Hey there guys,
check out this Ajax 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
		}		
	});
});

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:

$(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');
    }
  });
});

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?