[v4] Improve form control validation

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>