Adding validation modules that halts form events and submission

Question

I'm getting entangled in event spaghetti. I have a form, and I add components to add things such as validation and preparation methods. The preparations can't be done asynchronously, so they stop form execution, and ask for submit if they succeed. (Those add data to the form)

Where I hang is the validation. The validation added in the second file (component) also has to stop form submission, but I can't figure out how to add it in a separate file. The validation can be done synchronously. The component may or may not be there.

Tack a "valid" variable on the DOM form? Extra event parameters? Can validations even function as an event? I'd like to know the usual techniques in jQuery/JS.

Here is the structure of my code. You'll see I'm missing the link between validation and halting the submission.

var callbackOne, callbackTwo;

// MAIN FILE

$form.on('submit', function() {
  return $form.trigger('validate');
});


// COMPONENT 1

$form.on('submit', function() {
  if ($form.elementOne) {
    return true;
  }
  makeFirstCheck(callbackOne);
  return false;
});

callbackOne = function(response) {
  if (response.success) {
    $form.elementOne = response.usefulData;
    $form.submit();
    return true;
  } else {
    return false;
  }
};


// COMPONENT 2

$form.on('validate', function() {
  return checkThingsOut();
});

$form.on('submit', function() {
  if ($form.elementTwo) {
    return true;
  }
  makeSecondCheck(callbackTwo);
  return false;
});

callbackTwo = function(response) {
  if (response.success) {
    $form.elementTwo = response.usefulData;
    $form.submit();
    return true;
  } else {
    return false;
  }
};