3

is it possible to make data-validate="{required:true}" conditional? I need to make the validation trigger only if Synch To Rahaha dropdown field is YES. What changes are needed to make it happen?

enter image description here

2

OK I found out now how to do this. I removed all the "required" classes and validators and used a custom validator instead.

<script type="text/javascript">
    require([
        'jquery', // jquery Library
        'jquery/ui', // Jquery UI Library
        'jquery/validate', // Jquery Validation Library
        'mage/translate' // Magento text translate (Validation message translte as per language)
    ], function($){ 
    $.validator.addMethod(
        'validate-item-duration', function(value) {
            var postToRahaha = $(".clsRahahaIsPosted").val();
            if (postToRahaha == 0) return true; 
            return (value > 0);
        }, $.mage.__('This is a required field.'));
    $.validator.addMethod(
        'validate-rahaha-isposted', function(value) {
            var postToRahaha = $(".clsRahahaIsPosted").val();
            if (postToRahaha == 0) return true; 
            return (value != "" && $.trim(value) != "");
        }, $.mage.__('This is a required field.'));
    });
    </script>
| improve this answer | |
0

Based on @Rahahaha 's answer I created the following Magento 2 solution.

You can create a mixin to extend the default validation. In there you can add new rules.

validation-mixin.js

define([
'jquery',
'Magento_Ui/js/lib/validation/utils'
], function ($, utils) {
"use strict";

return function (validator) {
    validator.addRule(
        'required-entry-if-create-account-checked',
        function (value) {
            if($('.form-login .hidden-fields:visible').length === 1 || !$('input[name*="create_account_checkbox"]:checked').length) {
                    return true;
                } else {
                    return !utils.isEmpty(value);
                }
        },
        $.mage.__('This is a required field.')
    );
    validator.addRule(
        'validate-create_password',
        function (value) {
            if($('.form-login .hidden-fields:visible').length === 1 || !$('input[name*="create_account_checkbox"]:checked').length) {
                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($('.form-login .hidden-fields:visible').length === 1 || !$('input[name*="create_account_checkbox"]:checked').length) {
                return true;
            } else {
                return $('input[name*="create_account_password"]').val() === $('input[name*="create_account_password_confirm"]').val();
            }
        },
        $.mage.__('Please enter the same value again.')
    );

    return validator;
}

});

LayoutProccessorPlugin.php

In the LayoutProcessorPlugin where I created the fields I added those 2 rules for validation:

    protected function addFieldsToCreateAccount($jsLayoutResult)
{
    $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/form/element/checkbox-create-account'
        ],
        '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/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' => 'BB_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'
    ];

    return $jsLayoutResult;
}

(I use some custom templates to call validation functions so just add

           'validation' => [
            'validate-confirm_password' => true,
            'required-entry-if-create-account-checked' => true
        ],

to your own fields in layout processor.

| improve this answer | |

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.