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?
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.
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.
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"
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
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.
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
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
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
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.
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
(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)
