Magento 2.0 Make Javascript Required Field Validation Conditional

Question

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?

Answer 1

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>

Answer 2

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.