Conditionally required image field

George Tselios asked on October 21, 2019 12:15

Hi,

In my current project, I have a hero area that supports the following two layouts:

  1. Large Hero Area, that requires an image and a heading text.
  2. Small Hero Area, that requires only a heading text.

In my page type I have the following three fields:

  1. HeroAreaType (DataType Text, Required, Form Control: Drop-Down list, DataSource: list of options, Data: 0;Large Hero Area, 1;Small Hero Area), for the author to select the Hero Area Type.
  2. Heading (DataType Text, Required, Form Control: Text box): for the author to insert the heading text.
  3. Banner (DataType Text, Form Control: Media selection): for the author to select an image from the media library.

What I need to do, but I wasn't able to find any relevant documentation, is when the author selects the 'Large Hero Area' in the "HeroAreaType" list then the "Banner" field should be treated as required and if no value is set for the "Banner" a relevant validation message to be displayed to the author. Also if the author selects the 'Small Hero Area' in the "HeroAreaType" list, then the "Banner" field should be treated as optional.

I tried to use the "General Condition" Validation Rule of the field "HeroAreaType" in the relevant Validation section, but I could not make it work.

Is it possible to achieve such conditional behavior by using the "General Condition" or any other build in validation rule? If so please direct me to a relevant example or showcase. If not, what is the suggested way to achieve such behavior?

I' am using Kentico 12Sp1 MVC.

Thanks in advance,

George

Recent Answers

Roman Hutnyk answered on October 21, 2019 13:09

Why don't you make that field required, but hide through Visibility condition for Small Banner?

0 votesVote for this answer Mark as a Correct answer

Dmitry Bastron answered on October 21, 2019 13:11

Hi George,

You've almost done it. There are a few config options missing:

  1. HeroAreaType: scroll to the very bottom of the config screen and tick "Has depending fields" tickbox.
  2. Banner: make in Required and also in the very bottom:
    • Tick "Depends on another field" tickbox
    • In the Visibility condition put the following: HeroAreaType == 0

That's it!

1 votesVote for this answer Mark as a Correct answer

George Tselios answered on October 22, 2019 16:03

Thanks Roman & Dimitry for your prompt answers.

The problem with your suggested solution is that the "Banner" field hides when the author selects the 'Small Banner Area' option from the "HeroAreaType" drop down list.

What I need is for the field to remain visible but not required, so if the author wishes he may or may not supply a value for it. On the other hand, if the author selects the 'Large Banner Area' option from the "HeroAreaType" drop down list, then he should not be allowed to Save the page unless the "Banner" field holds a value. A validation rule like: ((HeroAreaType==0) && (!String.IsNullOrWhiteSpace(Banner))) || (HeroAreaType!=0)

Is this possible to achieve in the Kentico admin, or in any other way?

Thanks again,

George

P.S. In order to solve my issue using your suggested solution, I would have to introduce a second non required image field e.g. "SmallBanner" with the opposite visibility rules. So when the author selects the 'Small Banner Area' option, then this field will become visible but not required.

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.