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.