Skip to content

[Form] Bootstrap 4 - doesn't show validation errors for some form types #24801

Closed
@ostrolucky

Description

@ostrolucky
Q A
Bug report? yes
Feature request? no
BC Break report? no
RFC? no
Symfony version 4.0
$formBuilder
    ->add('type', ChoiceType::class, [
        'required' => false, 
        'expanded' => true, 
        'choices' => [1], 
        'constraints' => new NotBlank()
    ])
    ->add('submit', SubmitType::class);
{{ form(form) }}

Submitting this will produce following HTML

<form name="add" method="post">
    <div id="add">
        <fieldset class="form-group">
            <legend class="col-form-legend">Type</legend>
            <div id="add_type">
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="radio" id="add_type_placeholder" name="add[type]" class="form-check-input is-invalid" value="" checked="checked" /> None
                    </label>
                </div>
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="radio" id="add_type_0" name="add[type]" class="form-check-input is-invalid" value="1" /> 0
                    </label>
                </div>
            </div>
            <div class="invalid-feedback">
                <ul class="list-unstyled mb-0">
                    <li>This value should not be blank.</li>
                </ul>
            </div>
        </fieldset>
        <div class="form-group">
            <button type="submit" id="add_submit" name="add[submit]" class="btn-secondary btn">Submit</button>
        </div>
        <input type="hidden" id="add__token" name="add[_token]" value="nxWC6qDC59W3-bGZT-TPwsCSLZWGGTwslCSwoJZFJN4" />
    </div>
</form>

But errors don't show up, because following style from bootstrap 4 is applied

.invalid-feedback {
    display: none;
    margin-top: .25rem;
    font-size: .875rem;
    color: #dc3545;
}

When expanded option is false, html structure is different and display style will get overridden via following BS4 definition

.form-control.is-invalid ~ .invalid-feedback {
    display: block;
}

It works ok for BS3 theme.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions