Radio Button Group Required Validation

Wappler General How To
#21
  1. dmxValidator file is returning error bootstrapVersion is not defined
  2. dmx.bootstrap5forms is returning false

image

#22

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

dmxValidator.zip (5.3 KB)

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

#23

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.

#24

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{form.id}{input.name}" class="invalid-feedback"></div>

replace {form.id} with the id of the form and {input.name} 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>
    </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>
  <div id="dmxValidatorErrorform1payment_method" class="invalid-feedback"></div>
</form>
1 Like
#26

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: