Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • EA 2 posts 71 karma points
    May 11, 2022 @ 19:28
    EA
    0

    Backoffice: Dynamically change validation.mandatory

    (Sorry if this is the wrong category; I can't seem to figure out how to put it in Extending Umbraco and Using the API)

    I'm working on a custom Conditional Logic property editor that essentially holds conditional logic for other properties of a specific element or content type. Without going into too much detail on the context, here's what's going on:

    The Conditional Logic configuration includes:

    • a specific content/element type (which should be the content/element type it is used on)
    • one or more conditions based on the other properties and groups of the selected content/element type.

    For example, show the Circumference property and make it mandatory if the Shape property value is equal to "Circle":

    A block list, labeled Block List, containing a single inline block, which is labeled Test. The Test block contains 3 properties: Title, a textbox; Shape, a dropdown which is currently set to Circle; and Circumference, a textbox with an asterisk in its label to indicate that it's mandatory

    Which means that Circumference is hidden and not mandatory when the Shape selected is something other than Circle: The same block list as the previous image, but this time the value of the Shape property is Square, and the Circumference property is not visible

    I've only used this on element types (in a block list) so far.

    The problem I'm running into is with conditionally mandatory fields. I've been able to get a jQuery object of the correct umb-property element, and I'm able to use this to modify the mandatory property:

    propertyElement.scope().property.validation.mandatory = isMandatory;
    

    This successfully toggles the visual appearance, but for some reason setting mandatory to true seems to break the client-side validation of the entire block, even for other properties that have not been directly modified. (The Conditional Logic property editor JS does also call $setInvalid on the conditionally required property when the form is submitting, but I've confirmed that setting the mandatory property to true is definitely what's causing the issue.)

    For example, if there's a textbox property with a value that exceeds its character limit, and it's in the same block as a property that has been dynamically changed to mandatory, then the Save and Publish will go through without showing errors for either property.

    This appears to be a result of the invalid and valid states not being propagated up to the form correctly:

    The same Block list item as the previous images. This time the Title property shows a message saying 'Maximum 20 characters, 3 too many.' The Shape selected is Circle, and the Circumference property is visible.

    • The textbox will correctly show the message when its character limit has been exceeded
    • I've confirmed that the $setInvalid for the textbox and the conditionally required field are executing
    • But for some reason when the formHelper's submitForm function is running, the $valid and $invalid properties of the currentForm are both undefined (despite the fact that its $error property appears to contain the correct errors).

    the submitForm function of the minified-then-prettified formHelper JS in a browser debugger. The breakpoint is on a line that checks the values of args.skipValidation and currentForm.$invalid. A tooltip shows properties of the currentForm variable as described previously, plus the $name property which is 'contentForm'.

    Can anyone think of why this might be breaking the client-side validation of the whole block, or whether there's a safer way to modify whether a property is mandatory on just the client side? (If I just change that property to mandatory in the settings, then it's still mandatory and will be caught by server-side validation even when it should be hidden.)

Please Sign in or register to post replies

Write your reply to:

Draft