Conditional Region surrounding form section with validation

Steven_Joiner · March 4, 2022, 11:48am

I have 10 form groups in a conditional region all of which are validated depending on the number value entered in the field above.
for example if the number 2 is entered then the form group 1 and 2 are validated. and the rest are hidden using hide dynamic attribute using the same value. If 5 is entered form group 1-5 is shown. etc
( See Video )
The conditional region to be applied to all 10 form groups uses a value less than 11. So if 11 or more is entered the whole region is hidden.

My problem is once the CR is applied all the validation to the inputs within it stop working. Is this normal. Am I misunderstanding the use of CRs?

Screen Recording 2022-03-04 at 11.43.07

sid · March 5, 2022, 8:45am

I don’t quite get your setup to be honest.
But what you see is exactly how CR is supposed to work. Everything inside CR is removed from the HTML when condition is false. So the fields inside will not get validated because they don’t exist.

Steven_Joiner · March 7, 2022, 11:49am

Thanks for your response @sid. I’m probably not making much sense as per usual so apologies for that.
So what you say is what I thought. Maybe i’m over complicating what I am trying to achieve.

So what I have is the user will enter how many blocks there are ( a maximum of 10 blocks can be specified ). So for example:
if they enter the number 3, then 3 ‘block name / block numbering’ pairs ( form groups ) will be shown by using ‘Show’ attributes. so for example:

<div class="form-group row" dmx-show="(blocks.value >= 3)">
    <label for="blockName3" id="block3-label" class="sr-only">Block 3 name</label>
    <div class="col-lg-6 col-xl-7">
        <input type="text" class="form-control" id="blockName3" name="block_name_3" aria-describedby="block3-label" placeholder="Name of block 3" required="" data-msg-required="Please specify the name of this block." dmx-bind:required="(blocks.value > 2)">
    </div>

    <label for="blockNumbering3" id="numbering3-label" class="sr-only">Block 3 numbering</label>
    <div class="col-lg-6 col-xl-5">
        <input type="text" class="form-control" id="blockNumbering3" name="block_numbering_3" aria-describedby="numbering3-label" placeholder="Numbering 3" required="" data-msg-required="Please specify the numbering for this block." dmx-bind:required="blockName3.value">
    </div>

</div>

This works for number 2 -10 because.

block name / numbering 1and 2 don’t use show attributes because this section is for multi-blocks and there will always be at least 2 blocks.
block name / numbering 3 -10 each use the >= operator so the right amount of block name / numbering pairs are shown.

So at this point is where it goes wrong.

I need to validate for the numbers 11 and more as the form can except up to 10 blocks.
So I thought I would put a CR around the 10 block name / numbering pairs with a condition using the value entered above that is true for a value less than 11. So when numbers 2 - 10 is entered then the CR is shown and the correct amount of ‘block name / numbering pairs’ will shown. If 11 or more is entered then CR is false and it is hidden. ( I have a message alert in a CR that is true for 11 or more saying - maximum of 10 blocks allowed )

But what is happening is let’s say the number 3 is entered so the CR is true and shows the region but only 3 block name / numbering pairs are shown. BUT… the validation for the ‘block name / numbering’ pairs do not work. The CR seems to effect the validation.

Apologies if this is confusing and I hope it makes some kind of sense.

guptast · March 7, 2022, 1:06pm

Try adding the conditional ID assigned for the blocks as prefix for the validation dmx bindings.

E.g. dmx-bind:required="(blocks.value > 2)" will change to dmx-bind:required="(conditional1.blocks.value > 2)" and dmx-bind:required="blockName3.value" will change to dmx-bind:required="conditional2.blockName3.value"

Steven_Joiner · March 7, 2022, 2:00pm

Thanks @guptast I’ll try this!

Hyperbytes · March 7, 2022, 2:08pm

Is there a specific reason why you limit to 10 or is this a coding decision?
if you make the inputs names dynamic then you can deal with any number of inputs by placing them in a repeat which will actually make things simpler I think

Steven_Joiner · March 7, 2022, 2:18pm

The reason for the limit of 10 is because the the item we are multiplying is blocks of flats. So we have limited to 10 on the basis that developments that apply for our services will rarely, if ever exceed that amount of blocks. If they did then it would need to be discussed before application.

Hyperbytes · March 7, 2022, 3:42pm

Have you considered this type of structure
So the number of block is input into a form input, for example id_flat_count. Yiou can validate teh range of input to that
Form there you simply perform a repeat of that number of elements and generate the for data accordingly. ( will need tidied up and just noticed form tag needs to be outside COL.)
That way no need for hide/ show etc as input number of the form will be dynamic

<dmx-value id="var1" dmx-bind:value="form1.input_flat_count.value.toNumber()"></dmx-value><div class="container">
    <div class="row">
        <div class="col">
            <form id="form1">
                <input id="input_flat_count" name="flat_count" type="text" class="form-control">
            </form>
    </div>
    </div>
        <div class="row">
<div class="col">

</div>
</div>
<div class="row" is="dmx-repeat" id="repeat1" dmx-bind:repeat="var1.value">
            
            <div class="col-12">
<form id="form2">
                    <div class="mb-3">
                        <input type="text" class="form-control" dmx-bind:id="'block_numbering'+($index+1)" dmx-bind:name="'block_numnbering_'+($index+1)"  placeholder="Input here">
                    </div>
                    </form>
            </div>

        </div>
</div>

Steven_Joiner · March 7, 2022, 2:40pm

Thanks @Hyperbytes this looks a lot simpler and confirms my thoughts i’m over complicating the matter.
Ill give this a go! many thanks!

Hyperbytes · March 7, 2022, 2:43pm

For info. just tested that code ( i really should, test before posting!) and the repeat doesn’t seem to be functioning the correct number of times, may need to play with that

bpj · March 7, 2022, 2:48pm

The expression on the row is being used for the condition not for a repeat

Hyperbytes · March 7, 2022, 2:51pm

well spotted, should be a repeat children. will update the above code

Hyperbytes · March 7, 2022, 3:18pm

Actually Steven, sorry but this is not working correctly.
When adding the values to the field the repeat is not refreshing. I am guessing this is due to having no associated unique value. Not sure how to get around this at the moment.
This is a technique i have used many times with reference to data queries and fixed variables but first time using a form input for the repeat and it crashed and burned!

Guess a dmx.requestUpdate() needs to be called on value change

Hyperbytes · March 7, 2022, 3:39pm

Putting an intermediate variable into the mix seems to fix the issue. I have updated the code which appears to be working now

Steven_Joiner · March 7, 2022, 4:58pm

This is great @Hyperbytes thank you. Will try this this evening.

Hyperbytes · March 7, 2022, 5:00pm

let me know if you hit any problems

Steven_Joiner · March 8, 2022, 11:21am

Hi @Hyperbytes ( Brian ) . Generally this works great. Much better solution to my code heavy attempt. I’m having problems with the validation though.

this whole section is shown when the user selects yes from the radio group at the top. ( see video )
When selected ‘Yes’ the input to specify how many blocks appears.

The ‘How many blocks’ input is validated to be required when the above radio group value is ‘Yes’.
This works fine. It also has a ‘disabled’ attribute with a condition if the the radio group above is se to ‘No’
This works ok although do I actually need the disabled attribute?

As mentioned previously I need to validate so the the ‘How many blocks’ input only accepts the number range of 2 - 10. So I have also used a ’ Min (2) ’ and ‘Max (10)’ validation rules.
But the error message for ‘Max (10)’ is triggered on any number input. ( see video )

Plus validation for the Block-name / Block numbering in the repeat region doesn’t work either! these just have a required rule applied. I expect these now work differently now the two inputs are in a repeat region. see video

Here’s the current markup

<div class="form-group radiogroup row" id="splitBlock" is="dmx-radio-group" aria-describedby="split-label">
    <div class="col-12">
        <h3 class="form-sub-head required" id="split-label">Is the development split into self contained blocks?</h3>
    </div>
    <div class="col-12">
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" value="Yes" id="splitYes" name="split" aria-describedby="splityes-label" required="" data-msg-required="Please choose yes or No.">
            <label class="form-check-label" for="splitYes" id="splityes-label">Yes</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" value="No" id="splitNo" name="split" aria-describedby="splitno-label" required="" data-msg-required="Please choose Yes or No.">
            <label class="form-check-label" for="splitNo" id="splitno-label">No</label>
        </div>
        <small class="form-text text-muted ml-3">Note: Only blocks that are participating in the RTM should be included</small>
</div>
</div>
</div>

</div>
<div class="row">
<div class="col-lg-6" dmx-show="(splitBlock.value == 'Yes')">
    <div class="form-group row">
        <label for="blocks" id="howmanyblocks-label" class="col-sm-5 col-form-label col-lg-6">How many blocks</label>
        <div class="col col-md-7 col-lg-6">
            <input type="text" class="form-control" id="blocks" name="blocks" aria-describedby="howmanyblocks-label" placeholder="If yes how many Blocks" data-rule-number="" data-msg-number="Numeric values only please." dmx-bind:disabled="(splitBlock.value == 'No')" min="" data-rule-min="2" data-msg-min="At least 2 blocks are required" max="" data-rule-max="11" data-msg-max="A maximum of 10 blocks can be submitted." required="" data-msg-required="Please specify how many blocks." dmx-bind:required="(splitBlock.value == 'Yes')">
        </div>
    </div>
</div>
<div class="col-lg-6">
    <div class="form-group row">
        <label for="totalFlats" id="flatsamount-label" class="col-sm-5 col-form-label col-lg-6 required">how many flats in total</label>
        <div class="col col-md-7 col-lg-6">
            <input type="text" class="form-control" id="totalFlats" name="total_flats" aria-describedby="flatsamount-label" placeholder="Enter some text" required="" data-msg-required="Please specify the total number of flats." data-rule-number="" data-msg-number="Numeric values only please.">
        </div>
    </div>
</div>
</div>
<div class="row" dmx-show="blocks.value">
<div class="col-12">
    <h3 class="form-sub-head" id="block-label">Specify the numbering of the flats in each block. ( multi-blocks only )</h3>
    <small class="form-text text-muted">If blocks are not named please give designation i.e. Block A / Block B etc</small>
</div>
</div>
<div role="group" class="row block-details" area-labelledby="block-label" is="dmx-repeat" id="blockRepeat" dmx-bind:repeat="blockNumber.value">

<div class="col-md-6">
<div class="form-group row">
    <label for="blockName1" id="block1-label" class="sr-only">Block 1 name</label>
    <div class="col-lg-6 col-xl-7">
        <input type="text" class="form-control name" name="blockName" dmx-bind:id="'block_name'+($index+1)" dmx-bind:name="'block_name'+($index+1)" aria-describedby="block1-label" required="" data-msg-required="Please specify the name of this block." dmx-bind:placeholder="'Name of block_'+($index+1)">
    </div>
    <label for="blockNumbering1" id="numbering1-label" class="sr-only">Block 1 numbering</label>
    <div class="col-lg-6 col-xl-5">
        <input type="text" class="form-control" name="blockNumbering" dmx-bind:id="'block_numbering'+($index+1)" dmx-bind:name="'block_numbering'+($index+1)" aria-describedby="numbering1-label" dmx-bind:placeholder="'block_'+($index+1)+'Numbering i.e 1-9'" required="" data-msg-required="Please specify the numbering for this block.">
    </div>
</div>
</div>
</div>
<div class="row 11+" is="dmx-if" id="conditional3" dmx-bind:condition="(blocks.value > 10)">
<div class="col-12">
<p class="alert alert-danger">A maximum of 10 blocks can be submitted. If your property contains more than 10 blocks please contact us.</p>
</div>
</div>
</div>

  <div class="col d-flex justify-content-md-end"><button id="previous4" class="btn-green previous" dmx-on:click="steps.setValue(steps.value -1)">Previous</button>
    <button id="next5" class="btn-green next" dmx-on:click="run([{run:{action:`rtmApplicationForm.splitBlock.splitYes.validate();rtmApplicationForm.blocks.validate();rtmApplicationForm.totalFlats.validate();rtmApplicationForm.blockName.validate();rtmApplicationForm.blockNumbering.validate()`}},{wait:{delay:200}},{condition:{if:`(((((rtmApplicationForm.splitBlock.splitYes.invalid || rtmApplicationForm.splitBlock.splitNo.invalid) || rtmApplicationForm.blocks.invalid) || rtmApplicationForm.totalFlats.invalid) || rtmApplicationForm.blockRepeat.blockName.invalid) || rtmApplicationForm.blockRepeat.blockNumbering.invalid)`,else:{steps:{run:{action:`steps.setValue((steps.value + 1))`}}}}}])">Next</button>
  </div>
</div>

I wonder if i’m applying the steps and expressions in the ‘Next button’ inline flow incorrectly.

Any Ideas?
Thanks in advance!

how_many_blocks

radio_group

validate

Hyperbytes · March 8, 2022, 2:19pm

It may just be how you posted the code but I am seeing some structural errors flagged when i copy and paste it
Can you check?

Steven_Joiner · March 8, 2022, 2:32pm

Yeah sorry @Hyperbytes. I missed some closing divs at the bottom I think!

Hyperbytes · March 8, 2022, 6:05pm

OK,
firstly, neither input section is within a <form> tag so will never be validated
Add a form tag around the flats input
ENSURE THE INPUT TYPE IS SET TO NUMBER!
on the input, when you add the min/max ranges you will get

min="" data-rule-min="1" max="" data-rule-max="10"

edit the blanks to

min="1" data-rule-min="1" max="10" data-rule-max="10"

(actually the data-rule elements become redundant)
You should also probably set validation to integer so no decimals are added

then go into the field’s properties, select Dynamic events then select “Value Updated”
from the picker you can force validation by selecting “validate”

This will validate as you want

Not entirely sure what you are trying to do with the next button but same issue remains, no form tag and button is not a submit so validation does not run.

EDIT:
Add a form tag around the dynamically created inputs (either side of the ROW tag)
It would appear that manually adding dmx-on:click="form2.validate() to the form tag like this <form id="form2" dmx-on:click="form2.validate()"> forces validation of the second form inputs on the button click of the “Next” button (obviously substitute form number to match yours)