0

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;
}
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.