[U15] Validating a required field in property editor conditionally to prevent save and publish

[LuukPeters (Luuk Peters (Proud Nerds))]

I have a property editor that has a title field on it that is sometimes required and sometimes it isn’t. Visually, it works perfectly by setting the required property on the uui-input:

This title is not required when I can get a title from the oEmbed data, so it’s fine:

But when there is no oEmbed data or the platform does not support oEmbed, I want the editor to supply a title to the video:

As you can see, the field has the correct validation and has the red outline because of the required property on the uui-textbox. However, this is purely cosmetic and the backoffice really does not care. You can just happily save and publish the page:

So to be clear, this is something different than making the entire property editor required or not. I know how to do that and works on the value property being set or not. This is more or less custom validation logic. It’s clear that marking a uui-input as required does not do anything. But how do I handle this and prevent the page being published?

[LuukPeters (Luuk Peters (Proud Nerds))]

Nobody? I know it’s not THAT big of a deal, but I really would like to know for future projects as well.

[nielslyngsoe (Niels Lyngsø)]

Hi @LuukPeters

Great question, I know we are used to things happening magically from Angular-JS but this is not the case any longer.

For the Validation of Property Editors we follow a very Native architecture, which might give you a better background for the way its working.

We validation the Property Editor UI Element. And for you to append Validation to it, it has to become a Form Control(The Native name for an Element that can represent a value in a form)

We provide a helper Mixin that you can use to make that happen. Its called UmbFormControlMixin.
Search for that in the codebase, and you will find various implementations.

It declares a value property, so use that for the value, as it will trigger a validation check.

And then it comes with a method to add inner Form Controls to the validation of your property editor. That is called: addFormControlElement. Use this to add the Form Controls that should be valid for the Property Editor to be valid.

Lit comes with this Life Cycle callback firstUpdated, which is triggered after first render, making you able to query select inner elements:

override firstUpdated() {
		this.addFormControlElement(this.shadowRoot!.querySelector('umb-input-number-range')!);
	}

— In this way you can have Form Controls that can be invalid without them affecting the Property Editor, and vice versa if they are connected they make your Property Editor invalid as well. It’s your choice if they are connected.

In your case, I would always connect the text-area and then toggle the required attribute on it. that turns on or off the validation-rule.

For general examples see these Property Editors:

src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts

src/Umbraco.Web.UI.Client/src/packages/property-editors/number-range/property-editor-ui-number-range.element.ts

I hope that helps you move forward

[LuukPeters (Luuk Peters (Proud Nerds))]

@nielslyngsoe

input-toggle.element.ts

Hi @nielslyngsoe,

Thanks for the input, I forgot this topic for a little while It took some effort to dynamically add validation based on the selected video and the timing of DOM updates in Lit. Otherwise my uui-input was not available in the DOM, but I managed to get it to work

Thanks again!