Support for server-side validation for form grouping constructs

[hiddewie]

This issue is based on comment #23444 (comment), the discussion in #25050 and finally comment #25050 (comment). It is a followup of PR #25050 because the discussion became a feature request and went out of scope of the PR content.

Situation

A group of radio buttons or checkboxes. For the application logic a certain requirement is posed on the group of inputs, but not on the individual inputs. For example (checkboxes): at least one checkbox must be checked, or the checkboxes must satisfy a certain relation.

Usually, if radio buttons or checkboxes are grouped they are placed either in a <fieldset> or <div> which may have additional styling for a better UX. (This also helps users with a screen reader a lot.)

Once the form is submitted it is validated. That may be server side, or a client side JS library. Either way, often a class is added to the top level where the validation has occurred. For a normal text input this is the <input>. For the groups of radio buttons or checkboxes, this is the <fieldset> or <div>. It does not make sense to add the validity class to each child <input> element because the validity state does not depend on the input itself but rather on the group.

Problem

At the moment there is no support for adding either the .is-valid or the .is-invalid class the top-level validation element, without marking it as a form control (which is not correct, a wrapper is not an actual thing you can control). The labels of the checkboxes and/or radio buttons are not colored as invalid.

Example

Bootstrap 3 markup (generated with a Symfony form) which achieves the required effect:

<div class="form-group has-error"><label class="col-sm-2 control-label">C2</label>
    <div class="col-sm-10">
        <div id="form_c2">
            <div class="radio"> <label class=""><input type="radio" id="form_c2_placeholder" name="form[c2]" value="" checked="checked"> None</label>
            </div>
            <div class="radio"> <label class=""><input type="radio" id="form_c2_0" name="form[c2]" value="1"> 0</label>
            </div>
            <div class="radio"> <label class=""><input type="radio" id="form_c2_1" name="form[c2]" value="2"> 1</label>
            </div>
            <div class="radio"> <label class=""><input type="radio" id="form_c2_2" name="form[c2]" value="3"> 2</label>
            </div>
        </div><span class="help-block">    <ul class="list-unstyled"><li><span class="glyphicon glyphicon-exclamation-sign"></span> This value should not be blank.</li>
        </ul>
        </span>
    </div>
</div>

Bootstrap 4 markup. The current workaround in Symfony 3.4: adding the .form-control class to a grouping <div>.

<fieldset class="form-group">
    <div class="row is-invalid">
        <legend class="col-sm-2 col-form-legend">C2</legend>
        <div class="col-sm-10">
            <div id="form_c2" class="form-control is-invalid">
                <div class="form-check"><label class="form-check-label"><input type="radio" id="form_c2_placeholder" name="form[c2]" class="form-check-input" value="" checked="checked"> None</label></div>
                <div class="form-check"><label class="form-check-label"><input type="radio" id="form_c2_0" name="form[c2]" class="form-check-input" value="1"> 0</label></div>
                <div class="form-check"><label class="form-check-label"><input type="radio" id="form_c2_1" name="form[c2]" class="form-check-input" value="2"> 1</label></div>
                <div class="form-check"><label class="form-check-label"><input type="radio" id="form_c2_2" name="form[c2]" class="form-check-input" value="3"> 2</label></div>
            </div>
            <div class="invalid-feedback">
                <ul class="list-unstyled mb-0">
                    <li>This value should not be blank.</li>
                </ul>
            </div>
        </div>
    </div>
</fieldset>

The image below is a comparison between BS 3 and BS 4 beta 2.

With the workaround:

With the .form-control removed. No validation errors are visible

[mdo]

Perhaps some overlap with #25230.

[InsaneSkull]

@hiddewie, Is this still actual?

[hiddewie]

Seem that's solved! See http://symfony.com/blog/new-in-symfony-4-1-improved-bootstrap-4-form-theme?utm_source=feedburner&utm_medium=twitter&utm_campaign=Feed%3A+symfony%2Fblog+%28Symfony+Blog%29.

Other people work en on the symfony theme and it is now workable and functional.