mixpanel track form submission with validation - forms

Question

I have a form which I want to use mixpanel to track some properties when I submit. How can I stop the form submit through mixpanel if the validation return false ?
Here's my code in general.
My simple form
<form id="form" action="..." method="post" role="form">
// my elements here
<input type="submit" value="Submit" />
</form>
My script
<script>
function(){
mixpanel.track_forms("form", "MyEventName", getProperties());
$("form").submit(SubmitForm);
function getProperties(){
// get properties here
}
function SubmitForm() {
if (SomethingNotRight()) { return false; }
return true;
}
}
My problem:
I expect that in my SubmitForm function, after validation by SomethingNotRight function, it will stop the submit. However, even when SubmitForm returns false, the form keep submitting to the server, which I found out is because of the mixpanel.track_form.
The reason I use mixpanel.track_form is to avoid the race condition between form submit and mixpanel submit as debugging mixpanel track form

Answer 1

I can definitely understand the issue here, and the reason is that track_forms is just designed for the default use case of a form submitting right away. If you have a process in between (in this case a validation), you should basically do your own implementation. The idea of track_forms is to identify the form being submitted, log the event, wait for a while so that the event can be saved, and then proceed. In that sense, you can do:
(function(){})(
var theForm = $("#form"),
readyToProceed = false;
//listen for the submition
theForm.submit(function(e){
if(!readyToProceed){
e.preventDefault();
processSubmit();
}
});
function processSubmit(){
//validation process
if (SomethingNotRight()) { return false; }
//we are all good, lets proceed
mixpanel.track("Form submitted");
readyToProceed = true;
window.setTimeout(function(){ theForm.submit() }, 300);
}
);