You can access client-side events in order to hook into the lifecycle of a form in the browser. All events can be handled by establishing an event handler using Cognito.on('<event-type>', <event-handler>). Some form events can be prevented by calling the preventDefault() method from an event handler.

Events

beforeSubmit

Raised after the user clicks the “Submit” button, but before the form is submitted to the Cognito Forms servers. You may catch this event to perform custom validation, or display a message to the user before the form is submitted.

This event is preventable.

Data

Property	Type	Description
hasErrors	Boolean	Indicates whether or not there is a validation message being displayed.
entry	Object	An object representing the entry to be submitted.

afterSubmit

Raised after the form is submitted but before the confirmation page is displayed.

Data

Property	Type	Description
entry	Object	An object representing the entry to be submitted.
documents	Array	An array of documents included on the confirmation page.
documents[i].link	String	A URL that can be used to download the document.
documents[i].title	String	The title of the document.
documents[i].type	String	The type of document (e.g. adobe-pdf, ms-word, html)

beforeNavigate

Raised when the user attempts to move to another page in the form.

This event is preventable.

Data

Property	Type	Description
direction	String	What direction the user is navigating: forward or backward.
sourcePage	Object	The page that the user is currently on.
sourcePage.number	Number	The current page number.
sourcePage.name	String	The current page name.
sourcePage.title	String	The current page title.
destinationPage	Object	The page to which the user is navigating.
destinationPage.number	Number	The destination page number.
destinationPage.name	String	The destination page name.
destinationPage.title	String	The destination page title.

afterNavigate

Raised once a page navigation has completed.

Data

Property	Type	Description
direction	String	What direction the user navigated: forward or backward.
sourcePage	Object	The page that the user is currently on.
sourcePage.number	Number	The current page number.
sourcePage.name	String	The current page name.
sourcePage.title	String	The current page title.
destinationPage	Object	The page to which the user is navigating.
destinationPage.number	Number	The destination page number.
destinationPage.name	String	The destination page name.
destinationPage.title	String	The destination page title.

uploadFile

Raised every time a user uploads a file to the form. You may catch this event in order to display additional data about the file or a confirmation message.

Data

Property	Type	Description
file	Object	The file which was uploaded.
file.name	String	The name of the uploaded file.
file.id	String	The Cognito Forms assigned id of the file.
file.size	Number	The file size in bytes.

Example

The examples below capture the beforeSubmit event and prevent the entry submission if the provided first name is “Bob”.

Seamless embed

<script src="https://cognitoforms.com/f/seamless.js" data-key="beDsdRSO50OQKDy-LoN0Qw" data-form="85"></script>
<script>
  Cognito.on('beforeSubmit', function(event) {
    if (event.data.entry.Name.First === 'Bob')
      event.preventDefault();
  });
</script>

Iframe embed

<iframe src="https://cognitoforms.com/f/beDsdRSO50OQKDy-LoN0Qw/85" style="border:0;width:100%;" height="3017">

</iframe>

<script>
  Cognito.on('beforeSubmit', function(event) {
    if (event.data.entry.Name.First === 'Bob')
      event.preventDefault();
  });
</script>

Multiple forms

To access client-side events for multiple forms seamlessly embedded on a single page, you must manually mount the forms to set up separate events.

<div id="form1">

</div>

<div id="form2">

</div>

<script src="https://cognitoforms.com/f/seamless.js"></script>
<script>
  const api = Cognito('<value from data-key attribute>');
  const form1 = api.mount('<value from data-form attribute>', '#form1');
  form1.on('beforeSubmit', function(e) {
     console.log('beforeSubmit form1');
  });
  const form2 = api.mount('<value from data-form attribute>', '#form2');
  form2.on('beforeSubmit', function(e) {
     console.log('beforeSubmit form1');
  });
</script>

Please note that <value from data-key attribute>​ and <value from data-form attribute>​ refer to the attributes on the script tag from the Seamless embed code.

Advanced usage

For all events it is possible to return a Promise from the event handler to delay execution of the normal behavior for that event. For example, you could perform an asynchronous web request to validate an entry during submission, then allow or prevent the submission based on the result of that request.

Cognito.on('beforeSubmit', function(event) {
  return performRemoteValidation(event.data.entry).then(function(validationResult) {
    if (!validationResult.isValid)
      event.preventDefault();
  });
});