title: Go to next step after submitting custom form in Magento 2 checkout
body: <p>I created a module to add a new step to the Magento 2 checkout. This step has a custom form. On submitting the form I can't figure out how to go the the next step.</p>
  
  <p><em>checkout_index_index.xml</em></p>
  
  <pre><code>&lt;page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"&gt;
  &lt;body&gt;
      &lt;referenceBlock name="checkout.root"&gt;
          &lt;arguments&gt;
              &lt;argument name="jsLayout" xsi:type="array"&gt;
                  &lt;item name="components" xsi:type="array"&gt;
                      &lt;item name="checkout" xsi:type="array"&gt;
                          &lt;item name="children" xsi:type="array"&gt;
                              &lt;item name="steps" xsi:type="array"&gt;
                                  &lt;item name="children" xsi:type="array"&gt;
                                      &lt;!-- The new step --&gt;
                                      &lt;item name="my-new-step" xsi:type="array"&gt;
                                          &lt;item name="component" xsi:type="string"&gt;/BB_CheckoutStep/js/view/my-step-view&lt;/item&gt;
  
                                          &lt;!--To display step content before shipping step "sortOrder" value should be &lt; 1--&gt;
                                          &lt;!--To display step content between shipping step and payment step  1 &lt; "sortOrder" &lt; 2 --&gt;
                                          &lt;!--To display step content after payment step "sortOrder" &gt; 2 --&gt;
                                          &lt;item name="sortOrder" xsi:type="string"&gt;0&lt;/item&gt;
                                          &lt;item name="children" xsi:type="array"&gt;
                                              &lt;!--add here child component--&gt;
  
                                              &lt;!--start of custom form--&gt;
                                              &lt;item name="custom-checkout-form-container" xsi:type="array"&gt;
                                                  &lt;item name="component" xsi:type="string"&gt;BB_CheckoutStep/js/view/custom-checkout-form&lt;/item&gt;
                                                  &lt;item name="displayArea" xsi:type="string"&gt;custom-checkout-form-container&lt;/item&gt;
                                                  &lt;item name="provider" xsi:type="string"&gt;checkoutProvider&lt;/item&gt;
                                                  &lt;item name="config" xsi:type="array"&gt;
                                                      &lt;item name="template" xsi:type="string"&gt;BB_CheckoutStep/custom-checkout-form&lt;/item&gt;
                                                  &lt;/item&gt;
  
                                                  &lt;item name="children" xsi:type="array"&gt;
                                                      &lt;item name="custom-checkout-form-fieldset" xsi:type="array"&gt;
                                                          &lt;!-- uiComponent is used as a wrapper for form fields (its template will render all children as a list) --&gt;
                                                          &lt;item name="component" xsi:type="string"&gt;uiComponent&lt;/item&gt;
                                                          &lt;!-- the following display area is used in template (see below) --&gt;
                                                          &lt;item name="displayArea" xsi:type="string"&gt;custom-checkout-form-fields&lt;/item&gt;
                                                          &lt;item name="children" xsi:type="array"&gt;
                                                              &lt;item name="text_field" xsi:type="array"&gt;
                                                                  &lt;item name="component" xsi:type="string"&gt;Magento_Ui/js/form/element/abstract&lt;/item&gt;
                                                                  &lt;item name="config" xsi:type="array"&gt;
                                                                      &lt;!-- customScope is used to group elements within a single form (e.g. they can be validated separately) --&gt;
                                                                      &lt;item name="customScope" xsi:type="string"&gt;customCheckoutForm&lt;/item&gt;
                                                                      &lt;item name="template" xsi:type="string"&gt;ui/form/field&lt;/item&gt;
                                                                      &lt;item name="elementTmpl" xsi:type="string"&gt;ui/form/element/input&lt;/item&gt;
                                                                  &lt;/item&gt;
                                                                  &lt;item name="provider" xsi:type="string"&gt;checkoutProvider&lt;/item&gt;
                                                                  &lt;item name="dataScope" xsi:type="string"&gt;customCheckoutForm.text_field&lt;/item&gt;
                                                                  &lt;item name="label" xsi:type="string"&gt;Text Field&lt;/item&gt;
                                                                  &lt;item name="sortOrder" xsi:type="string"&gt;1&lt;/item&gt;
                                                                  &lt;item name="validation" xsi:type="array"&gt;
                                                                      &lt;item name="required-entry" xsi:type="string"&gt;true&lt;/item&gt;
                                                                  &lt;/item&gt;
                                                              &lt;/item&gt;
                                                              &lt;item name="checkbox_field" xsi:type="array"&gt;
                                                                  &lt;item name="component" xsi:type="string"&gt;Magento_Ui/js/form/element/boolean&lt;/item&gt;
                                                                  &lt;item name="config" xsi:type="array"&gt;
                                                                      &lt;!--customScope is used to group elements within a single form (e.g. they can be validated separately)--&gt;
                                                                      &lt;item name="customScope" xsi:type="string"&gt;customCheckoutForm&lt;/item&gt;
                                                                      &lt;item name="template" xsi:type="string"&gt;ui/form/field&lt;/item&gt;
                                                                      &lt;item name="elementTmpl" xsi:type="string"&gt;ui/form/element/checkbox&lt;/item&gt;
                                                                  &lt;/item&gt;
                                                                  &lt;item name="provider" xsi:type="string"&gt;checkoutProvider&lt;/item&gt;
                                                                  &lt;item name="dataScope" xsi:type="string"&gt;customCheckoutForm.checkbox_field&lt;/item&gt;
                                                                  &lt;item name="label" xsi:type="string"&gt;Checkbox Field&lt;/item&gt;
                                                                  &lt;item name="sortOrder" xsi:type="string"&gt;3&lt;/item&gt;
                                                              &lt;/item&gt;
                                                              &lt;item name="select_field" xsi:type="array"&gt;
                                                                  &lt;item name="component" xsi:type="string"&gt;Magento_Ui/js/form/element/select&lt;/item&gt;
                                                                  &lt;item name="config" xsi:type="array"&gt;
                                                                      &lt;!--customScope is used to group elements within a single form (e.g. they can be validated separately)--&gt;
                                                                      &lt;item name="customScope" xsi:type="string"&gt;customCheckoutForm&lt;/item&gt;
                                                                      &lt;item name="template" xsi:type="string"&gt;ui/form/field&lt;/item&gt;
                                                                      &lt;item name="elementTmpl" xsi:type="string"&gt;ui/form/element/select&lt;/item&gt;
                                                                  &lt;/item&gt;
                                                                  &lt;item name="options" xsi:type="array"&gt;
                                                                      &lt;item name="0" xsi:type="array"&gt;
                                                                          &lt;item name="label" xsi:type="string"&gt;Please select value&lt;/item&gt;
                                                                          &lt;item name="value" xsi:type="string"&gt;&lt;/item&gt;
                                                                      &lt;/item&gt;
                                                                      &lt;item name="1" xsi:type="array"&gt;
                                                                          &lt;item name="label" xsi:type="string"&gt;Value 1&lt;/item&gt;
                                                                          &lt;item name="value" xsi:type="string"&gt;value_1&lt;/item&gt;
                                                                      &lt;/item&gt;
                                                                      &lt;item name="2" xsi:type="array"&gt;
                                                                          &lt;item name="label" xsi:type="string"&gt;Value 2&lt;/item&gt;
                                                                          &lt;item name="value" xsi:type="string"&gt;value_2&lt;/item&gt;
                                                                      &lt;/item&gt;
                                                                  &lt;/item&gt;
                                                                  &lt;!-- value element allows to specify default value of the form field --&gt;
                                                                  &lt;item name="value" xsi:type="string"&gt;value_2&lt;/item&gt;
                                                                  &lt;item name="provider" xsi:type="string"&gt;checkoutProvider&lt;/item&gt;
                                                                  &lt;item name="dataScope" xsi:type="string"&gt;customCheckoutForm.select_field&lt;/item&gt;
                                                                  &lt;item name="label" xsi:type="string"&gt;Select Field&lt;/item&gt;
                                                                  &lt;item name="sortOrder" xsi:type="string"&gt;2&lt;/item&gt;
                                                              &lt;/item&gt;
                                                              &lt;item name="date_field" xsi:type="array"&gt;
                                                                  &lt;item name="component" xsi:type="string"&gt;Magento_Ui/js/form/element/date&lt;/item&gt;
                                                                  &lt;item name="config" xsi:type="array"&gt;
                                                                      &lt;!--customScope is used to group elements within a single form (e.g. they can be validated separately)--&gt;
                                                                      &lt;item name="customScope" xsi:type="string"&gt;customCheckoutForm&lt;/item&gt;
                                                                      &lt;item name="template" xsi:type="string"&gt;ui/form/field&lt;/item&gt;
                                                                      &lt;item name="elementTmpl" xsi:type="string"&gt;ui/form/element/date&lt;/item&gt;
                                                                  &lt;/item&gt;
                                                                  &lt;item name="provider" xsi:type="string"&gt;checkoutProvider&lt;/item&gt;
                                                                  &lt;item name="dataScope" xsi:type="string"&gt;customCheckoutForm.date_field&lt;/item&gt;
                                                                  &lt;item name="label" xsi:type="string"&gt;Date Field&lt;/item&gt;
                                                                  &lt;item name="validation" xsi:type="array"&gt;
                                                                      &lt;item name="required-entry" xsi:type="string"&gt;true&lt;/item&gt;
                                                                  &lt;/item&gt;
                                                              &lt;/item&gt;
                                                          &lt;/item&gt;
                                                      &lt;/item&gt;
                                                  &lt;/item&gt;
                                              &lt;/item&gt;
  
                                           &lt;!--end of custom form--&gt;
  
                                          &lt;/item&gt;
                                      &lt;/item&gt;
                                  &lt;/item&gt;
                              &lt;/item&gt;
                          &lt;/item&gt;
                      &lt;/item&gt;
                  &lt;/item&gt;
              &lt;/argument&gt;
          &lt;/arguments&gt;
      &lt;/referenceBlock&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p><em>my-step-view.js</em></p>
  
  <pre><code>define(
  [
      'ko',
      'uiComponent',
      'underscore',
      'Magento_Checkout/js/model/step-navigator'
  ],
  function (
      ko,
      Component,
      _,
      stepNavigator
  ) {
      'use strict';
      /**
       *
       * mystep - is the name of the component's .html template,
       * &lt;Vendor&gt;_&lt;Module&gt;  - is the name of the your module directory.
       *
       */
      return Component.extend({
          defaults: {
              template: 'BB_CheckoutStep/mystep'
          },
  
          //add here your logic to display step,
          isVisible: ko.observable(true),
  
          /**
           *
           * @returns {*}
           */
          initialize: function () {
              this._super();
  
              // register your step
              stepNavigator.registerStep(
                  //step code will be used as step content id in the component template
                  'step_code',
                  //step alias
                  null,
                  //step title value
                  'Birthdate',
                  //observable property with logic when display step or hide step
                  this.isVisible,
  
                  _.bind(this.navigate, this),
  
                  /**
                   * sort order value
                   * 'sort order value' &lt; 10: step displays before shipping step;
                   * 10 &lt; 'sort order value' &lt; 20 : step displays between shipping and payment step
                   * 'sort order value' &gt; 20 : step displays after payment step
                   */
                  9
              );
  
              return this;
          },
  
          /**
           * The navigate() method is responsible for navigation between checkout step
           * during checkout. You can add custom logic, for example some conditions
           * for switching to your custom step
           */
          navigate: function () {
          },
  
          /**
           * @returns void
           */
          navigateToNextStep: function () {
              stepNavigator.next();
          }
      });
  }
  );
  </code></pre>
  
  <p><em>mystep.html</em></p>
  
  <pre><code>&lt;!--The 'step_code' value from the .js file should be used--&gt;
  </code></pre>
  
  <p>
      </p>
  
  <pre><code>&lt;div id="checkout-step-title"
       class="step-content"
       data-role="content"&gt;
  
      &lt;!-- ko foreach: getRegion('custom-checkout-form-container') --&gt;
      &lt;!-- ko template: getTemplate() --&gt;&lt;!-- /ko --&gt;
      &lt;!--/ko--&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></li></p>
  
  <p><em>custom-checkout-form.js</em></p>
  
  <pre><code>/*global define*/
  define([
  'Magento_Ui/js/form/form',
  'Magento_Checkout/js/model/step-navigator'
  ], function(Component) {
  'use strict';
  return Component.extend({
      initialize: function () {
          this._super();
          // component initialization logic
          return this;
      },
  
      /**
       * Form submit handler
       *
       * This method can have any name.
       */
      onSubmit: function() {
          // trigger form validation
          this.source.set('params.invalid', false);
          this.source.trigger('customCheckoutForm.data.validate');
  
          // verify that form data is valid
          if (!this.source.get('params.invalid')) {
              // data is retrieved from data provider by value of the customScope property
              var formData = this.source.get('customCheckoutForm');
              // stepNavigator.next();
              // do something with form data
              console.dir(formData);
              this.navigateToNextStep();
          }
      }
  });
  });
  </code></pre>
  
  <p>custom-checkout-form.html</p>
  
  <pre><code>&lt;div&gt;
  &lt;form id="custom-checkout-form" class="form" data-bind="attr: {'data-hasrequired': $t('* Required Fields')}"&gt;
      &lt;fieldset class="fieldset"&gt;
          &lt;!-- ko foreach: getRegion('custom-checkout-form-fields') --&gt;
          &lt;!-- ko template: getTemplate() --&gt;&lt;!-- /ko --&gt;
          &lt;!--/ko--&gt;
      &lt;/fieldset&gt;
      &lt;button type="button" data-bind="click: onSubmit" class="action"&gt;
          &lt;span data-bind="i18n: 'Submit'"&gt;&lt;/span&gt;
      &lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p></p>
  
  <p>So i'm trying to use navigateToNextStep() from my-step-view.js in custom-checkout-form but i'm not sure on how to reference that. I also looked into giving parameters to getRegion. I just started working with Magento 2 and KnockoutJS so i'm sorry if it's a bit of a dumb question. I created the new step and custom form by following the Magento 2 Dev Docs. Thanks in advance :)</p>
  
  <p><a href="http://devdocs.magento.com/guides/v2.2/howdoi/checkout/checkout_new_step.html" rel="nofollow noreferrer">http://devdocs.magento.com/guides/v2.2/howdoi/checkout/checkout_new_step.html</a>
  <a href="http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_form.html" rel="nofollow noreferrer">http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_form.html</a></p>