Enabling and disabling required field dynamically

Wappler General How To
#1

I am developing insert form I have a like this input fields and I want to do dynamicly enable and disable to required attribute in my input field . All field names , types , requirements etc returns from json file …

forexample;

<input dmx-show="columnDisplayType != 'INTEGER'" dmx-bind:type="'number'" class="form-control" dmx-bind:id="'decimal1'+$index" dmx-bind:name="columnName" dmx-bind:placeholder="columnName" >

BUT I NEED TO DO ;

<input dmx-show="columnDisplayType != 'INTEGER'" dmx-bind:type="'number'" class="form-control" dmx-bind:id="'integer'+$index" dmx-bind:name="columnName" dmx-bind:placeholder="columnName" required="" data-msg-required="test validation message">

I want to add this attribute to dynamic
can anyone guide me @patrick , @George , @Teodor

#2

Hello Serhat,
The disabled attribute is available in dynamic attributes, when you select your input.

Screenshot_51
Screenshot_51.jpg753×299 39.8 KB

#3

Hello @Teodor ,
but I want to enable it dynamicly …

if json file return “validation= active” then dynamicly add this attribute and validation message

required="" data-msg-required="test validation message"

#4

What it migh work is to save the ‘validation=active’ value into a cookie. Then on loading the json to update the cookie value. Apply the ‘Disabled’ value when the cookie value = active

#5

Ah you are referring to toggling the required attribute?
Try: dmx-bind:required="validation == 'active'"

#6

Try setting a variable and using it as the show condition. You can then toggle the variable’s value from pretty much any dynamic action which will be reflected in the visibility of the input field

#7

Why using a variable when you can use dynamic attributes directly?

dmx-bind:required="condition == 'somethig'"

dmx-bind:disabled="condition2 == 'somethig elese'"

dmx-bind:readonly="condition3 == 123"

1 Like
#8

because somefield doesnt require this attribute … I am trying now your solutions …

#9

Well you can also try then:

dmx-bind:data-msg-required=“condition == 'abc' ? 'message here' : ''”

1 Like
#10

Added

<input dmx-show="columnDisplayType != 'CODELOOKUP'" dmx-bind:type="text" class="form-control" dmx-bind:id="'input1'+$index" dmx-bind:name="columnName" dmx-bind:placeholder="columnName" dmx-bind:required="isColumnNullable == 'false'" dmx-bind:data-msg-required="isColumnNullable == 'false' ? 'message here' : ''">

Result

<input class="form-control" is="dmx-input" value="" id="input10" name="Extra" placeholder="Extra" data-msg-required="" style="">
#11

Ok so what’s wrong then?

#12

there isnt “required” attribute

#13

Then your condition is not met …

#14

false

this is returned condition from json

#15

Then use:

dmx-bind:required="isColumnNullable == false" dmx-bind:data-msg-required="isColumnNullable == false ? 'message here' : ''"

as the ‘false’ returned by the json is not a string and your condition expression is wrong.

#16

Thank you sooo much @Teodor

working !!! :slight_smile:

1 Like