I am new to jQuery.

I want to use two different jQuery functions when a form submit button is pressed. I would like to run a form validation function, and if it validates fine, I want to use an ajax submission where it sends the form data and then hides the form showing the word "Sent".

Running each function separately, I can get either to work. But trying to figure out how to run one and IF TRUE run the next one I can't figure out.

Validate Function

1. $("#contactForm").validate({
   	success: "valid",
   	rules: {
   	name:
   	{
   	required: true,
   	rangelength: [3, 50],
   	},
   	message:
   	{
   	required: true,
   	rangelength: [3, 300],
   	},
   	email:
   	{
   	required: true,
   	email: true
   	}
   	}
   	});

Submission Function

1. $("#generate").click(function(){
   	// Make button disabled, and submitting
   	$("#contactForm").validate;
   	contactForm.generate.value = 'Processing';
   	contactForm.generate.disabled = true;
   	//var name = testForm.name.value;
   	// We need to convert to URL encode
   	var name = escape(contactForm.name.value);
   	var email = contactForm.email.value;
   	var message = escape(contactForm.message.value);
   	var department = contactForm.department.value;
   	var dataString = 'name='+ name + '&email=' + email + '&message=' + message + '&department=' + department;
   	$("#quote").load('scripts/contact.php?' + dataString);
   	});
   	});

When the forms submit button is clicked (it's called generate) I thought in that code on the click event I could write $("#contactForm").validate; and that would run my function. Instead it just submits the form via ajax.

How do I get it to run the validate function and only when the validate function returns that the form is valid that it then submits?