Hello Everyone,
I’ve been researching this forum but didn’t found a solution…I guess this is a very easy fix!
I have a radio button group:
And I need to insert a “require” validation, one of the options needs to be chosen.
When I select one of the options and set “Required” the message appears inside of the radio group!
I would like to have this message below the radio group, is this possible?
Thanks and have a great week!
Try setting required on the last input only.
Could you post the generated HTML?
@ben Thanks! I tried setting required on the last input, and any validation message is showed!
@patrick sure, generated HTML below:
<div class="form-group row" is="dmx-radio-group" id="group1">
<legend class="col-sm-12 col-form-label">Payment method <span class="text-danger"> *</span></legend>
<div class="col-sm-5">
<div class="form-check">
<input class="form-check-input" type="radio" value="Account" id="inp_payment_method1" name="payment_method" data-msg-required="" required="">
<label class="form-check-label" for="inp_payment_method1">Account</label>
</div>
</div>
<div class="col-sm-5">
<div class="form-check">
<input class="form-check-input" type="radio" value="Payment" id="inp_payment_method2" name="payment_method" data-msg-required="">
<label class="form-check-label" for="inp_payment_method2">Payment</label>
</div>
</div>
</div>Just had a similar case today and saw the same thing.
In my code I have required on all radio inputs. I don’t have a radio group.
But it always shows the message in the last input. And break the UI as well, because of the dmx validator message div. Just need some class fix for radio/checkbox components.
hello @patrick any news about this issue? 
I think I see where it goes wrong. Do you use Bootstrap 4 or 5?
I have seen this in both 4 & 5.
Last issue mentioned above is a BS5 project.
bootstrap 4
I did some testing with the validator and for me with bootstrap 4 it looks like:
It almost looks like it didn’t detect bootstrap in your case, do you use local, cdn or custom version of bootstrap and how does the css include look like?
hey @patrick, thanks! It’s a custom boostrap, but the message error position is wrong only with check and radio groups!
Can you check the css include, it should be <link rel="stylesheet" href="bootstrap/4/css/bootstrap.min.css" />.
If the path is different then please let me know.
its a custom theme, ok?
<link rel="stylesheet" href="/assets/plugins/global/plugins.bundle.css" />
Since it is not a default location it is not being detected. We check the urls of the stylesheets to detect which bootstrap is included to know where error messages should be inserted and which classes should be added since these differ per framework. When the validator can’t detect a framework it will place the error message directly after the form element (input), in your case directly after the checkbox and before the label element.
You can test the following update.
dmxValidator.zip (5.3 KB)
@patrick is this just for BS4?
We tested this on BS5 and it just moves the required message from last radio to first one. It still disrupts the UI. What would be ideal is that the message shows up at the bottom of all the radios, irrespective of their alignment.
The update should have a better Bootstrap detection, instead of searching the specific css include it checks for the bootstrap javascript object and extracts the version from it. It should not change anything when bootstrap was already detected correctly.
How was the BS5 included on the page, do you also have the javascript include on the page and where is it located?
You could test if it detected bootstrap by typing dmx.bootstrap5forms in the console, it should return true when it correctly detected it.
