What’s the correct mark-up for custom radios and server-side validation?

[martinbean]

I’m having trouble rendering stacked custom radios with server-side validation.

My raw mark-up looks like this (a Laravel Blade template):

<div class="form-group">
    <label class="form-control-label">Category</label>
    <div class="custom-controls-stacked">
        @foreach($categories as $id => $name)
            <label class="custom-control custom-radio">
                <input type="radio" id="category-{{ $id }}" name="category_id" value="{{ $id }}" class="custom-control-input" {{ old('category_Id') == $id ? 'checked ' : '' }}/>
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description">{{ $name }}</span>
            </label>
        @endforeach
    </div>
    @foreach($errors->get('category_id') as $error)
        <div class="invalid-feedback">{{ $error }}</div>
    @endforeach
</div>

Where is the appropriate place to put the .is-invalid class that both makes the radio inputs red, and displays the <div class="invalid-feedback"> elements?

[istratos]

#23426, #23444
Sadly can't be done at the moment, you'll need custom css until it is fixed. Hopefully in Beta 3.

A quick workaround for this would be adding .d-block to .invalid-feedback just for this set of errors.

And to make the custom inputs displayed as red when there is an error:

class="custom-control-input{{ $errors->has('category_id') ? ' is-invalid' : '' }}"

[martinbean]

@istratos Urgh. Thanks for confirming my fears 😄

What I‘ve done in the meantime is this:

<div class="form-group">
    <label class="form-control-label">Category</label>
    <div class="custom-controls-stacked">
        @foreach($categories as $id => $name)
            <label class="custom-control custom-radio">
                <input type="radio" id="category-{{ $id }}" name="category_id" value="{{ $id }}" class="custom-control-input{{ $errors->has('category_id') ? ' is-invalid' : '' }}" {{ old('category_id') == $id ? 'checked ' : '' }}/>
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description">{{ $name }}</span>
            </label>
        @endforeach
    </div>
    @if($errors->has('category_id'))
        <div aria-hidden="true" class="form-control is-invalid" style="display: none;"></div>
    @endif
    @include('partials.invalid-feedback', ['field' => 'category_id'])
</div>

So if there’s an error, I add an empty <div> with .form-control and .is-invalid classes, which because of the sibling selector styles shows the .invalid-feedback element.

[mdo]

The problem with any other practical options is that we shouldn't place form validation feedback within the form label. This is largely driven by my decision to wrap checkbox and radio inputs with the label to avoid an explicit for attribute.

Here's an example of what our options are: https://codepen.io/anon/pen/WXKgzv. First is feedback in the label, second is rewriting the components.