[Laavel6] Bootstrap에 나란히 있는 라디오 단추의 확인 메시지를 표시할 때의 함정

개요

Laavel 애플리케이션에 로그인할 때 Bootstrap에서 만든 라디오 버튼의 확인 정보를 표시할 수 없습니다.
이 보도는 그 해결 방법의 한 예를 소개한다.
※ 라벨 앱에서 발생한 것은 부츠트랩 때문에 라벨 특유의 것이 아닙니다.

컨디션

$ composer -V
Composer version 1.10.20 2021-01-27 15:41:06

$ php artisan --version
Laravel Framework 6.20.16

전제 조건

프롬프트 메시지는 각 입력 항목 아래에 별도로 표시됩니다.
("반드시 분류를 지정하십시오."확인 정보)

Laavel 교재에서 흔히 사용하는 코드는 화면 위쪽에 모든 확인 정보를 스트라이프로 쓰는 방법이다.
(공식 문서)

<!-- /resources/views/post/create.blade.php -->

<h1>ポスト作成</h1>

@if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<!-- ポスト作成フォーム -->

이번에는 이쪽 코드를 사용합니다(예).
(이것도 공식 문서에서 온 것이다)

<!-- /resources/views/post/create.blade.php -->

<label for="title">Post Title</label>

<input id="title" type="text" class="@error('title') is-invalid @enderror">

@error('title')
    <div class="alert alert-danger">{{ $message }}</div>
@enderror

Bootstrap을 통해 나란히 있는 라디오 단추의 확인 정보를 표시할 때의 트랩 해결 방법

해결된 코드

create.balde.php

{{-- 略 --}}

<div class="form-group mb-4">
    <p for="exampleInputPassword1">カテゴリー<span class="text-danger">(※)</span></p>
    {{-- ラジオボタン  --}}
    <div class="form-check form-check-inline is-invalid">
 　　　　 <input class="form-check-input form-check-inline is-invalid " type="radio" name="category_id" id="category1" value="1" >
         <label class="form-check-label" for="category1">Laravel</label>
    </div>                        
    <div class="form-check form-check-inline is-invalid">
　　　　  <input class="form-check-input form-check-inline is-invalid " type="radio" name="category_id" id="category2" value="2" >
　　　　  <label class="form-check-label" for="category2">PHP</label>
    </div>                        
    <div class="form-check form-check-inline is-invalid">
　　　　  <input class="form-check-input form-check-inline is-invalid" type="radio" name="category_id" id="category3" value="3" >
　　　　  <label class="form-check-label" for="category3">Docker</label>
    </div>                        
    <div class="form-check form-check-inline is-invalid">
　　　　  <input class="form-check-input form-check-inline is-invalid" type="radio" name="category_id" id="category4" value="4" >
　　     <label class="form-check-label" for="category4">web基礎</label>
    </div>
    {{-- バリデーションメッセージ --}}
    <span class="invalid-feedback" role="alert">
　　     <strong>カテゴリーは必ず指定してください。</strong>
    </span>
</div>
{{-- 略 --}}

함정에 빠졌을 때의 코드

create.balde.php

{{-- 略 --}}

<div class="form-group mb-4">
    <p for="exampleInputPassword1">カテゴリー<span class="text-danger">(※)</span></p>
    {{-- ラジオボタン  --}}
    <div class="form-check form-check-inline">
 　　　　 <input class="form-check-input form-check-inline is-invalid" type="radio" name="category_id" id="category1" value="1" >
         <label class="form-check-label" for="category1">Laravel</label>
    </div>                        
    <div class="form-check form-check-inline">
　　　　  <input class="form-check-input form-check-inline is-invalid" type="radio" name="category_id" id="category2" value="2" >
　　　　  <label class="form-check-label" for="category2">PHP</label>
    </div>                        
    <div class="form-check form-check-inline">
　　　　  <input class="form-check-input form-check-inline　is-invalid" type="radio" name="category_id" id="category3" value="3" >
　　　　  <label class="form-check-label" for="category3">Docker</label>
    </div>                        
    <div class="form-check form-check-inline">
　　　　  <input class="form-check-input form-check-inline is-invalid" type="radio" name="category_id" id="category4" value="4" >
　　     <label class="form-check-label" for="category4">web基礎</label>
    </div>
    {{-- バリデーションメッセージ --}}
    <span class="invalid-feedback" role="alert">
　　     <strong>カテゴリーは必ず指定してください。</strong>
    </span>
</div>
{{-- 略 --}}

이렇게 하면 확인 정보를 표시할 수 없습니다.

차이점과 해결 이유

차이점

라디오 단추 (((((input 탭의 type=radio) 부류에 div 탭이 있는지 여부 is-invalid프롬프트 표시

<div class="form-check form-check-inline is-invalid">

확인 메시지가 표시되지 않음

<div class="form-check form-check-inline>

이유를 해결하다

오류를 검증할 때 입력 형식이 빨개지고 정보를 표시하는 데는 다음과 같은 규칙이 있습니다. 단지 간단하게 만족하지 않을 뿐입니다.

무선 단추의 input 라벨 종류is-invalid

확인 메시지를 표시하는 DOM의 형제 요소(같은 층)의 라벨 유형에 각각 is-invalid,invalid-feedback

이런 느낌input으로 라벨과span 라벨을 형제 요소로 삼으면 발리일 정보가 나오지만 포석이 좋지 않다.

    {{-- 略 --}}
    <input class="form-check-input form-check-inline is-invalid" type="radio" name="category_id" id="category4" value="4" >
　　 <label class="form-check-label" for="category4">web基礎</label>
    {{-- バリデーションメッセージ --}}
    <span class="invalid-feedback" role="alert">
　　     <strong>カテゴリーは必ず指定してください。</strong>
    </span>

보태다

실제 코드는 Laavel입니다.

@error 확인 메시지가 있는지 없는지를 지시적으로 확인

라디오 버튼의 선택 데이터를 기본 데이터로 DB에 저장합니다

.
따라서 실제 코드는 다음과 같다.
View 파일
create.blade.php

{{-- 略 --}}
<div class="form-group mb-4">
    <p for="exampleInputPassword1">カテゴリー<span class="text-danger">(※)</span></p>
    {{-- ラジオボタン  --}}
    @foreach ($categoryForRadioButton as $index => $categoryName)
        <div class="form-check form-check-inline @error('category_id') is-invalid @enderror">
            <input class="form-check-input form-check-inline @error('category_id') is-invalid @enderror" type="radio" name="category_id" id="category{{ $index }}" value="{{ $index }}" {{ old('category_id') == $index ? 'checked': '' }}>
            <label class="form-check-label" for="category{{ $index }}">{{ $categoryName }}</label>
        </div>                        
    @endforeach
    {{-- バリデーションメッセージ --}}
    @error('category_id')
        <span class="invalid-feedback" role="alert">
            <strong>{{ $message }}</strong>
        </span>
    @enderror
</div>
{{-- 略 --}}

라디오 버튼 가져오기 옵션
Category.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Category extends Model
{
    /**
     * ラジオボタン用の配列データを作成
     *
     * @return array
     */
    public function getAll(): array
    {
        $categoryForRadioButton = [];

        $allCategories = $this->all();
        foreach ($allCategories as $index => $category) {
            $categoryForRadioButton[$index + 1] = $category->name;
        }
        return $categoryForRadioButton;
    }
}

참고 자료

Bootstrap-Custom styles

Bootstrap4의 라디오와 checkbox에서 오류 정보를 스마트하게 표시할 때

Readouble-Laravel 6.x 유효성 검사(유효성 검사 오류 표시)