Bootstrap 5: FormGroup does not show validation errors

[vrozkovec]

Error component is generated correctly:

<div id="error4e58" class="invalid-feedback">Field "some label" is required.</div>

However error is not shown. That requires HTML/CSS hierarchy below and css selector that displays feedback is this .was-validated :invalid ~ .invalid-feedback - Wicket itself does not set html attributes, such as required - btw. would it make sense to add it in Wicket 10.x or was there some reason why it is not like that?

<form class="row g-3 needs-validation was-validated" novalidate="">
  <div class="col-md-4">
    <label for="validationCustom02" class="form-label">Last name</label>
    <input type="text" class="form-control" id="validationCustom02" value="Otto" required="">
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationCustom05" class="form-label">Zip</label>
    <input type="text" class="form-control" id="validationCustom05" required="">
    <div class="invalid-feedback">
      Please provide a valid zip.
    </div>
  </div>
 </form>

Looking at the Bootstrap selectors, another option is to add .is-valid or .is-invalid css class to the .form-control directly, which is what is done in #1017 and it seems to work nicely, not sure about how effective the solution is, though.

[keesvandieren]

I found this problem too

After approval of #1025 it will be reproducible by running bootstrap-samples and going to http://localhost:8080/validation/tooltip and submitting the form there

[martin-g]

would it make sense to add it in Wicket 10.x or was there some reason why it is not like that?

Dunno! I don't remember a discussion about it! Please open a ticket (+ PR)! Thanks!

[keesvandieren]

Great! So whoever makes the fix you can easily validate it by running samples with Start.java and browsing to http://localhost:8080/validation/tooltip

[martin-g]

Honestly it is not clear to me what is the problem and what to look for in that page.

[keesvandieren]

@martin-g when you clear the 'Required date' field and submit the form, it is showing the feedback not below the form input but instead somewhere half in the screen.

Screenshot which shows it:

[martin-g]

OK! But adding required attribute does not help.