How to Conditionally Stop Page Submissions

When using custom events on the Submit action of a page, it is often important to add a "catch all" for potential errors and to prevent the page from submitting. For example, if there is a custom event on Submit that copies multiple elements from the page and stores them in a hidden answer field, and that event errors, I don't want to page to submit (indicating to the user that the request was successful) with a blank answer field.

Examples

To prevent the page from submitting when there is an error, the Custom Code can be wrapped in a Javascript try/catch block. For example, the code below will pop up a javascript alert with the contents "There was a problem in the Raise Error Submit event: ReferenceError: bar is not defined".

try {
  /* Custom code goes here; for this example I am doing something that intentionally throws an error */
  var fu = bar;
} catch(err) {
  /* In this case we want the error message to be displayed with some context in an alert popup */
  alert('There was a problem in the Raise Error Submit event: ' + err);
  /* Here is the magic word, by ensuring that we stop the action, further processing of the submit event chain halts */
  action.stop();
}

It is also possible that you may want to do multiple actions and potentially even an ajax call to verify something before submit. It is possible to do the action.stop before anything in the submit event begins and then only allow the event to continue if a success condition has been reached.

action.stop();
    
    $.ajax({
        method: 'put',
        url: bundle.apiLocation() + '/submissions/' + submissionId,
        data: JSON.stringify(values),
        success: function () {
          action.continue();
        },
        error: function () {
            console.log('Error: Update of Table Data field failed.');
        }
    });
}