Conditionally Required Floating Item

An item in the Universal Theme using the Optional – Floating template looks like this:

An item using the Required – Floating template looks like this:

In addition, if the item is required we would most probably set the Value Required attribute to Yes. What if the item is sometimes required but not always? How do we create a Conditionally Required field?

Firstly, we would make sure there is a Validation on the field that checks that the value is provided if required. This way, regardless of what the form may or may not send to the database, it is validated appropriately.

Secondly, to indicate to the user that the item is required or optional, based on the value of another item, we can use a Dynamic Action that sets the required item property (this triggers the client-side validation) and adds or removes the is-required class from the item’s container (this shows the little red “required” indicator on the page).

For example, let’s say that whether item P1_COST_CENTRE is required or not is dependent on whether a hidden item, P1_COST_CENTRE_REQUIRED, has the value 'Y'.

  • Create a Dynamic Action
    1. Event: Change
    2. Selection Type: Item(s)
    3. Item(s): P1_COST_CENTRE_REQUIRED
    4. Client-side Condition Type: Item = Value
    5. Item: P1_COST_CENTRE_REQUIRED
    6. Value: Y
  • Create a True Action: Execute JavaScript Code
var item = $("#P1_COST_CENTRE");
item.prop("required",true);
item.closest(".t-Form-fieldContainer").addClass("is-required");
  • Create a False Action: Execute JavaScript Code
var item = $("#P1_COST_CENTRE");
item.prop("required",false);
item.closest(".t-Form-fieldContainer").removeClass("is-required");

The above code works for all item templates (“Optional”, “Optional – Above”, “Optional – Floating”, etc.) in the Universal Theme; I’ve tested this on APEX 18.2 and 19.1.

Note: this is custom code for the Universal Theme, so it may or may not work for other themes; and might stop working in a future revision of the theme.

Plugins

UPDATE 29/7/2019: I’ve created some simple Dynamic Action plugins (for APEX 18.2 and later) to implement this, if you’re interested you can download them from here:

To use these plugins, select them as an Action to take on a Dynamic Action:

EDIT 29/7/2019: modified to use a better method to find the container div.

Older Themes

In other themes, the way that a required field is rendered is different. For example, in Theme 26 (Productivity Applications) the label for a required item is rendered in bold, along with a red asterisk; if the item is optional, no red asterisk is rendered. The way to make an item conditionally mandatory in this theme is:

  1. Set the item to use the Required template (so that the red asterisk is rendered).
  2. In the Dynamic Action JavaScript, execute the following if the item should be optional:
var itemLabel = $("label[for='P1_COST_CENTRE']");
itemLabel.removeClass("uRequired");
itemLabel.addClass("uOptional");

To make the item required again:

var itemLabel = $("label[for='P1_COST_CENTRE']");
itemLabel.removeClass("uOptional");
itemLabel.addClass("uRequired");
Report Google Map Plugin v1.0 Released
Menu Popup with Declarative List

Comments

  1. Hello Jeffrey,
    I can get this to work fine on a normal text box but I need it to work on a text field with auto complete.
    The required label works fine but the physical ‘required’ does not.
    PS. I am just using the js – not the plugin.

    Thank you

  2. You Rock, Jeff! Thank You. Conditional Red Dog-Ear is exactly what I was looking for.

  3. Man, thanks a lot for this. It works like a charm. I had to add a validation to make my radio group truly required, but it works nicely. Thanks again!

  4. Thanks, very good 😉

    It works on select list, but not on radio groups.
    Any idea why.

    best regards
    Frank

  5. How do I do this for multiple fields at once? Or do I have to do separate dynamic actions for each field?

    • Hi Marc,

      If you want one dynamic action to affect multiple elements, set a Class on each item (Advanced -> CSS Classes), e.g. “condRequired”, and on the Action set Selection Type to jQuery Selector, with an expression like “.condRequired”.

      Of course, if you want a different rule for different elements, you will still need separate dynamic actions in each case; in more complex cases I would revert to writing some custom JavaScript instead.

      Jeff

  6. Thanks for the reply. So, after doing this, I still need to use JavaScript code for the True/False actions right? What would that code look like? I tried using just the last two lines of your code (and under ‘Affected Elements’, I chose the jQuery Selector), but that didn’t work:

    item.prop(“required”,true);
    item.closest(“.t-Form-fieldContainer”).addClass(“is-required”);

    Thanks.

    • Hi Marc, no, if you are using the plugin you don’t need any javascript. If you choose jQuery Selector, you need to enter a jQuery selector expression, e.g. .my-item-class

  7. Madelein van Duuren
    18 November 2020 - 2:03 pm

    This is an excellent piece of code. Helped me immensely where I optionally set username and password fields as required when users have accepted terms and conditions to register an account online.

Leave a Reply

Your email address will not be published / Required fields are marked *