AEM Touch UI required field validation that works with show/hide of dialog field

There is a frequent uses case to hide/show certain fields in a component dialog box based on the value selected in the drop down. Sometimes, those fields need to be hidden/shown based on criteria of the checkbox being checked. Adobe AEM 6.3 provides OOTB functionality to show hide fields based on the value selected in the drop drown. The script is located at path:

/libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide/js/dropdownshowhide.js

The comments in the script provide a nice description on how to use it to show/hide fields based on drop down selected value.

/**
 * Extension to the standard dropdown/select component. It enabled hidding/unhidding of other components based on the
 * selection made in the dropdown/select.
 *
 * How to use:
 *
 * - add the class cq-dialog-dropdown-showhide to the dropdown/select element
 * - add the data attribute cq-dialog-dropdown-showhide-target to the dropdown/select element, value should be the
 *   selector, usually a specific class name, to find all possible target elements that can be shown/hidden.
 * - add the target class to each target component that can be shown/hidden
 * - add the class hidden to each target component to make them initially hidden
 * - add the attribute showhidetargetvalue to each target component, the value should equal the value of the select
 *   option that will unhide this element.
 */
(function (document, $) {
    "use strict";

    // when dialog gets injected
    $(document).on("foundation-contentloaded", function (e) {
        // if there is already an inital value make sure the according target element becomes visible
        showHideHandler($(".cq-dialog-dropdown-showhide", e.target));
    });

...

For show/hide fields based on checkbox, have a look at the this blog post http://aempodcast.com/2016/javascript/simple-touch-ui-dialog-extensions-aem/
The required field validation can be added to a dialog box field by just adding the required="{Boolean}true" attribute to it. If no value is provided for the required field, the dialog box form cannot be submitted.
In case of the required field being hidden, the validation is still performed on the form submission. This is a very confusing behvior as the user has no way to know what is causing the probelm.
The solution is to implement a required field validator which only applies validation if the required field is not hidden.