Radio Button Group Required Validation

  1. dmxValidator file is returning error bootstrapVersion is not defined
  2. dmx.bootstrap5forms is returning false


Thx for the reply, seems there was indeed a problem with the bootstrap detection in the update, here a new update. (5.3 KB)

You may also test dmx.bootstrapVersion, it should return 5 when it detected bootstrap 5 or 4 for bootstrap 4.

This seems to work better now.
Although, in my case, I have a 2 column layout of radio buttons, so it still breaks my UI.
For a single column list, it works well.

It is impossible to detect all kind of layouts. You can add the element for the error message yourself in the DOM on a custom location.

<div id="dmxValidatorError{}{}" class="invalid-feedback"></div>

replace {} with the id of the form and {} with the name of the input the error message belongs to. When there is already an element with the specific id in the DOM then the validator will use it.

<form id="form1">
  <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 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 id="dmxValidatorErrorform1payment_method" class="invalid-feedback"></div>
1 Like

You say it impossible to detect all layouts, but with solutions like these, who want that anyways. Thanks a lot @patrick. Wasn’t expecting a solution but glad to see one. :slight_smile: