Magento 2 - Validation on key-up checkout

Question

I added two new fields to the shipping step in checkout. For those fields, I trigger the validation function in the validateShippingInformation function in shipping.js.

Now for the default e-mail field, it has a validation on keyup. How would I also make my fields validate on keyup? The fields are added to email.html.

Email.html: (part of this file where I add the fields)

<fieldset class="fieldset create-account-fieldset" data-bind="fadeVisible: !isPasswordVisible()">
    <div class="field">
        <div class="control">
            <input class="input-text"
                   type="checkbox"
                   name="create-account"
                   id="create-account-toggle" />
            <label class="label" for="create-account-toggle">
                <span data-bind="i18n: 'I would like to create an account'"></span>
            </label>

            <fieldset class="fieldset create-password-fieldset">
                <div class="field">
                    <div class="control">
                        <div class="password-fields">
                            <input class="input-text"
                                   data-bind="
                                   css: {focused: this.textInput != ''},
                                   event: {
                                            keyup: validatePassword
                                        }"
                                   type="password"
                                   data-password-min-length="6"
                                   name="create-pw"
                                   id="create-pw"
                                   data-validate="{required:false, 'validate-customer-password':true}" autocomplete="off"/>
                            <label class="label" for="create-pw">
                                <span data-bind="i18n: 'Password'"></span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="field">
                    <div class="control">
                        <input class="input-text"
                               data-bind="
                               css: {focused: this.textInput != ''},
                                event: {
                                            keyup: validatePassword
                                        }"
                               type="password"
                               name="confirm-pw"
                               data-password-min-length="6"
                               id="confirm-pw"
                               data-validate="{required:false, equalTo:'#create-pw'}" autocomplete="off"/>
                        <label class="label" for="confirm-pw">
                            <span data-bind="i18n: 'Confirm password'"></span>
                        </label>
                    </div>
                </div>
            </fieldset>
        </div>
    </div>
</fieldset>

shipping.js: (part where I added the validation for the fields)

/**
 * @return {Boolean}
 */
validateShippingInformation: function () {
    var shippingAddress,
        addressData,
        loginFormSelector = 'form[data-role=email-with-possible-login]',
        emailValidationResult = customer.isLoggedIn(),
        field,
        createAccount,
        createPassword,
        confirmPassword;

    if (!customer.isLoggedIn()) {
        $(loginFormSelector).validation();
        emailValidationResult = Boolean($(loginFormSelector + ' input[name=username]').valid());
        createAccount = Boolean($('[name="newsletter-subscribe"]').attr('checked'));
        if ($('[name="create-pw"]').val()) {
            createPassword = $('[name="create-pw"]').valid();
        }
        if ($('[name="confirm-pw"]').val()) {
            confirmPassword = $('[name="confirm-pw"]').valid();
            createPassword = $('[name="create-pw"]').valid();
        }
    }

    if (this.isFormInline) {
        this.source.set('params.invalid', false);
        this.triggerShippingDataValidateEvent();

        if (emailValidationResult &&
            this.source.get('params.invalid')
        ) {
            this.focusInvalid();
            return false;
        }
        shippingAddress = quote.shippingAddress();
        addressData = addressConverter.formAddressDataToQuoteAddress(
            this.source.get('shippingAddress')
        );
        //Copy form data to quote shipping address object
        for (field in addressData) {
            if (addressData.hasOwnProperty(field) &&  //eslint-disable-line max-depth
                shippingAddress.hasOwnProperty(field) &&
                typeof addressData[field] != 'function' &&
                _.isEqual(shippingAddress[field], addressData[field])
            ) {
                shippingAddress[field] = addressData[field];
            } else if (typeof addressData[field] != 'function' &&
                !_.isEqual(shippingAddress[field], addressData[field])) {
                shippingAddress = addressData;
                break;
            }
        }

        if (customer.isLoggedIn()) {
            shippingAddress['save_in_address_book'] = 1;
        }
        selectShippingAddress(shippingAddress);
    }

    if (!emailValidationResult) {
        $(loginFormSelector + ' input[name=username]').focus();
        return false;
    }
    return true;
}

Answer 1

I ended up adding the fields in the layoutProcessor instead of email.html like this:

$jsLayoutResult['components']['checkout']['children']['steps']['children']['shipping-step']['children']
    ['shippingAddress']['children']['customer-email']['children']['additional-login-form-fields']['children']['create_account_password'] = [
        'component' => 'Magento_Ui/js/form/element/abstract',
        'config' => [
            'customScope' => 'shippingAddress.custom_attributes',
            'customEntry' => null,
            'template' => 'ui/form/field',
            'elementTmpl' => 'BigBridge_Checkout/form/element/password-overwrite'
        ],
        'dataScope' => 'shippingAddress.custom_attributes.create_account_password',
        'label' => __('Password'),
        'provider' => 'checkoutProvider',
        'validation' => [
            'validate-create_password' => true,
            'required-entry-if-create-account-checked' => true
        ],
        'options' => [],
        'filterBy' => null,
        'customEntry' => null,
        'visible' => true,
        'sortOrder' => '1005'
    ];

    $jsLayoutResult['components']['checkout']['children']['steps']['children']['shipping-step']['children']
    ['shippingAddress']['children']['customer-email']['children']['additional-login-form-fields']['children']['create_account_password_confirm'] = [
        'component' => 'Magento_Ui/js/form/element/abstract',
        'config' => [
            'customScope' => 'shippingAddress.custom_attributes',
            'customEntry' => null,
            'template' => 'ui/form/field',
            'elementTmpl' => 'BigBridge_Checkout/form/element/password-overwrite'
        ],
        'dataScope' => 'shippingAddress.custom_attributes.create_account_password_confirm',
        'label' => __('Confirm password'),
        'provider' => 'checkoutProvider',
        'validation' => [
            'validate-confirm_password' => true,
            'required-entry-if-create-account-checked' => true
        ],
        'options' => [],
        'filterBy' => null,
        'customEntry' => null,
        'visible' => true,
        'sortOrder' => '1006'
    ];

Now the validation automatically works.