Created by: browner12
Problem
Currently server side validation requires an .invalid-feedback
element to be a sibling of a .form-control
element. This works fine most of the time. However, sometimes we have elements to don't fit into standard form control inputs. For example, I have multi-column checkbox area that allows for overflow scroll in the y direction.
<div class="col-12 col-sm-10">
<div class="form-control is-invalid rounded p-2">
<div class="row" style="height: 200px; overflow-y: scroll; ">
@foreach($domains as $domain)
<div class="col-12 col-md-6 col-lg-4">
<div class="form-check form-check-inline">
<input name="domains[]" type="checkbox" id="domains.{{ $domain->id }}" class="form-check-input" value="{{ $domain->id }}" />
<label class="form-check-label" for="domains.{{ $domain->id }}">{{ $domain->domain }}</label>
</div>
</div>
@endforeach
</div>
</div>
<div class="invalid-feedback">Something went wrong.</div>
</div>
However, wrapping this element in a .form-control
causes a lot of unwanted styling, that can often break the layout of it.
Proposed Solution
This change allows us to apply any class that starts with .form-control
to the element, and still trigger showing .valid-feedback
and .invalid-feedback
elements. Now we can wrap any non-standard form controls in the class of our choosing, and still get validation.
<div class="form-control-no-styling is-invalid rounded p-2"></div>
<div class="invalid-feedback">Something went wrong.</div>