cancel
Showing results for 
Search instead for 
Did you mean: 

Custom fields checkout checkbox toggle required?

SOLVED

Custom fields checkout checkbox toggle required?

In the Magento 2 checkout I added 3 custom fields, a checkbox that shows the customer two password fields that are used to create an account.

enter image description here

Since the checkbox toggles if the fields are visible or hidden with JavaScript I want the password fields to be required when visible and not required when hidden.

How could I achieve something like this?

 

I'm creating the fields like this in LayoutProcessor.php

 

$jsLayoutResult['components']['checkout']['children']['steps']['children']['shipping-step']['children']
    ['shippingAddress']['children']['customer-email']['children']['additional-login-form-fields']['children']['create_account_checkbox'] = [
        'component' => 'Magento_Ui/js/form/element/abstract',
        'config' => [
            'customScope' => 'shippingAddress.custom_attributes',
            'template' => 'ui/form/field',
            'elementTmpl' => 'BB_Checkout/form/element/checkbox-overwrite'
        ],
        'provider' => 'checkoutProvider',
        'dataScope' => 'shippingAddress.custom_attributes.create_account_checkbox',
        'description' => __('I would like to create an account'),
        'sortOrder' => '1004',
        'validation' => [
            'required-entry' => false,
        ]
    ];

    $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' => 'BB_Checkout/form/element/password-overwrite'
        ],
        'dataScope' => 'shippingAddress.custom_attributes.create_account_password',
        'label' =>  __('Password'),
        'provider' => 'checkoutProvider',
        'validation' => [
            'validate-password' => true,
            'required-entry' => 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' => 'BB_Checkout/form/element/password-overwrite-confirm-password'
        ],
        'dataScope' => 'shippingAddress.custom_attributes.create_account_password_confirm',
        'label' => __('Confirm password'),
        'provider' => 'checkoutProvider',
        'validation' => [
            'required-entry' => true
        ],
        'options' => [],
        'filterBy' => null,
        'customEntry' => null,
        'visible' => true,
        'sortOrder' => '1006'
    ];

 

 

And i'm currently hiding and showing them like this:

create-account.js

/**
 * Create account by entering password and confirm password.
 */

require([
    'jquery'
], function ($) {
    return togglePasswordFields = function () {
        if($('input[name*="create_account_checkbox"]:checked').length && $('.form-login .hidden-fields:visible').length != 1) {
            $('div[name*="create_account_password"]').css('display','block');
            $('div[name*="create_account_password_confirm"]').css('display','block');
            $('div[name*="create_account_password"]').setAttribute('aria-required', true);
            $('div[name*="create_account_password"]').required = true;
            $('div[name*="create_account_password_confirm"]').setAttribute('aria-required', true);
            $('div[name*="create_account_password_confirm"]').required = true;
        } else {
            $('div[name*="create_account_password"]').css('display','none');
            $('div[name*="create_account_password_confirm"]').css('display','none');
            $('div[name*="create_account_password"]').setAttribute('aria-required', false);
            $('div[name*="create_account_password"]').required = false);
            $('div[name*="create_account_password_confirm"]').setAttribute('aria-required', false);
            $('div[name*="create_account_password_confirm"]').required = false;
        }
    }
});

The aria-required, true/false and required = true/false doesn't do a thing right now.

 

Thanks!

1 ACCEPTED SOLUTION

Accepted Solutions

Re: Custom fields checkout checkbox toggle required?

I ended up replacing 'required-entry' with a custom validator that checks if the checkbox is checked first.

 

        validator.addRule(
            'required-entry-if-create-account-checked',
            function (value) {
                if(hiddenLoginFields.is(':visible') || !$('input[name*="create_account_checkbox"]').is(":checked")) {
                        return true;
                    } else {
                        return !utils.isEmpty(value);
                    }
            },
            $.mage.__('This is a required field.')
        );
        validator.addRule(
            'validate-create_password',
            function (value) {
                if(hiddenLoginFields.is(':visible') || !$('input[name*="create_account_checkbox"]').is(":checked")) {
                    return true;
                } else {
                    var pass;

                    if (value == null) {
                        return false;
                    }

                    pass = $.trim(value);

                    if (!pass.length) {
                        return true;
                    }

                    return !(pass.length > 0 && pass.length < 6);
                }
            },
            $.mage.__('Please enter 6 or more characters. Leading and trailing spaces will be ignored.')
        );
        validator.addRule(
            'validate-confirm_password',
            function (value) {
                if(hiddenLoginFields.is(':visible') || !$('input[name*="create_account_checkbox"]').is(":checked")) {
                    return true;
                } else {
                    return $('input[name*="create_account_password"]').val() === $('input[name*="create_account_password_confirm"]').val();
                }
            },
            $.mage.__('Please enter the same value again.')
        );

View solution in original post

5 REPLIES 5

Re: Custom fields checkout checkbox toggle required?

I ended up replacing 'required-entry' with a custom validator that checks if the checkbox is checked first.

 

        validator.addRule(
            'required-entry-if-create-account-checked',
            function (value) {
                if(hiddenLoginFields.is(':visible') || !$('input[name*="create_account_checkbox"]').is(":checked")) {
                        return true;
                    } else {
                        return !utils.isEmpty(value);
                    }
            },
            $.mage.__('This is a required field.')
        );
        validator.addRule(
            'validate-create_password',
            function (value) {
                if(hiddenLoginFields.is(':visible') || !$('input[name*="create_account_checkbox"]').is(":checked")) {
                    return true;
                } else {
                    var pass;

                    if (value == null) {
                        return false;
                    }

                    pass = $.trim(value);

                    if (!pass.length) {
                        return true;
                    }

                    return !(pass.length > 0 && pass.length < 6);
                }
            },
            $.mage.__('Please enter 6 or more characters. Leading and trailing spaces will be ignored.')
        );
        validator.addRule(
            'validate-confirm_password',
            function (value) {
                if(hiddenLoginFields.is(':visible') || !$('input[name*="create_account_checkbox"]').is(":checked")) {
                    return true;
                } else {
                    return $('input[name*="create_account_password"]').val() === $('input[name*="create_account_password_confirm"]').val();
                }
            },
            $.mage.__('Please enter the same value again.')
        );

Re: Custom fields checkout checkbox toggle required?

Hello

 

I'm encountering problem at checkout time on my Site. I fill in the address, then when I click continue, nothing happens and the next step that would be the payment, is not loaded. I checked and the saveBilling method is called normally. I put it to display the returned Html, and the pagemento conditions are there, but it is not rendered on the checkout page.

 

Checkout page:
nada-acontece.png

Returning html when passing through saveBillingAction:

print-pagamento.png

 

Magento version is 1.8.1.

Re: Custom fields checkout checkbox toggle required?

Hey,

@SannNL Can you please share the extension if it is open source?

Regards

Re: Custom fields checkout checkbox toggle required?

Sorry I can't it isn't open source i used this for a checkout extension and is also only tested on 2.2.3 and 2.2.6

Re: Custom fields checkout checkbox toggle required?

Hello,

            can you please let me know where i need to add this js code ?