Client-side events

You can access client-side events in order to hook into the lifecycle of a form in the browser.

Events

beforeSubmit.cognito

The beforeSubmit event is raised after the user clicks the “Submit” button, but before the form is submitted to the Cognito Forms servers. Users may catch this event to perform custom validation, or display a message to the user before the form is submitted. This event is preventable.

Payload

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

afterSubmit.cognito

The afterSubmit event is raised after the form is submitted but before the confirmation page is displayed.

Payload

Property Type Description
entry Object An object representing the entry to be submitted.

beforeNavigate.cognito

The navigate event is raised when the user attempts to move forward or back a page in the form. This event is preventable.

Payload

Property Type Description
direction String Indicates the direction (forward or backward) that the user is navigating on the form.
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.cognito

This event is raised once a page navigation has completed.

Payload

Property Type Description
direction String Indicates the direction (forward or backward) that the user is navigating on the form.
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.

uploadFile.cognito

The uploadFile event is raised every time a user upload a file to the form. Users may catch this event in order to display additional data about the file or a confirmation message.

Payload

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 cancels the entry submission if the first name that was entered is “Bob”.

Seamless embed

<div class="cognito">
   <script src="https://services.cognitoforms.com/s/beDsdRSO50OQKDy-LoN0Qw"></script>
   <script>Cognito.load("forms", { id: "33" }, { success: function() { ExoJQuery(function() {
      ExoJQuery(document)
         .on('beforeSubmit.cognito', function(e, data) {
            if (data.entry.Name.First && data.entry.Name.First.toLowerCase() === 'bob') {
               e.preventDefault();
            }
         });
       }); } });
   </script>
</div>

Iframe embed

<head>  
    <script>
        $(document).on('beforeSubmit.cognito', function(e, data) {
                   if (data.entry.Name.First && data.entry.Name.First.toLowerCase() === 'bob') {
            e.preventDefault();
           }
               });
       </script>
</head> 

<body>
    <iframe src="https://services.cognitoforms.com/f/UXg3sey0W0yx8xB8C2LbHQ?id=158" style="position:relative;width:1px;min-width:100%;*width:100%;" frameborder="0" scrolling="yes" seamless="seamless" height="628" width="100%"></iframe>
    <script src="https://services.cognitoforms.com/scripts/embed.js"></script>
</body>