Conditional Validation Possible?

I want a form field to be required only if a value of another field is a certain value. For example in the attached screenshot I want the follow up date form field to be required if the outcome select field has a value of ‘Employed’. Otherwise it would not be required.

Well, yes - just use the dynamic attributes - input - required and add your expression.

But I only want it required if the value of the drop down is ‘Employed’

Yes Brad, enter the expression you need, as on any other condition you are using on your pages.

input.value == 'somethihng'

Yes, I just found it under Dynamic Attributes. Didn’t know that was there. Thanks again!

I love Wappler!

Yes, the attributes available per each element are available in the dynamic attributes menu :slight_smile:

1 Like

So simple (if you know it’s there) and works like a charm. Thanks again so very much!

Don’t you guys sleep? :wink: :beers:

1 Like

Haha, no it’s Netflix and beer time with the COVID-19 panic all around Europe :slight_smile: all the bars closed at least by the end of the month.

4 Likes

Ok, now I have another question. I am sure I need to do this manually but not sure of the right syntax. I have my form field required based on a value in a drop down field. Works wonderfully.

(selectTESProgramOutcome.value == "Employed")
<input type="text" class="form-control form-control-sm" id="inputTESFollowUpDue" name="inputTESFollowUpDue" aria-describedby="input2_help" is="dmx-date-picker" format="YYYY-MM-DD"
													dmx-bind:required="(selectTESProgramOutcome.value == &quot;Employed&quot;)">

How would I change this to also be required if the value is ‘Unemployed’? Could be either … if the value is either ‘Employed’ or ‘Unemployed’ the form field should be required.

Thanks and be safe!

You can use standard JavaScript operators for this:

dmx-bind:required="selectTESProgramOutcome.value == 'Employed' || selectTESProgramOutcome.value == 'Unemployed'"
1 Like

Thanks Teodor, guess I have to spend some of this isolation time learning Javascript operators. :wink:

It’s not really complicated :slight_smile:
https://www.w3schools.com/js/js_comparisons.asp